分页组件

指定分页的总页数

         1. 通过设定page-count去直接指定总页码
        <el-pagination   :page-count="10">
        </el-pagination>
        2. 指定一共有多少条数据，以及当前每页显示多少条。让组件自行计算总共有到少页
        <el-pagination   :page-size="5" :total="36" >
        </el-pagination>

设定展示效果的属性

1.加背景

    <el-pagination :page-count="10" background></el-pagination>

2.变小

    <el-pagination :page-count="10" small></el-pagination>
    <el-pagination :page-count="10" background small></el-pagination>

3.禁用

    <el-pagination disabled :page-count="10" background></el-pagination>
    <el-pagination disabled :page-count="10"></el-pagination>

4.只有一页时隐藏

    <el-pagination hide-on-single-page :page-count="1" background></el-pagination>

5.定义上一页和下一页上显示的文字

<el-pagination :page-count="10" background   prev-text="< 上一页" next-text="下一页 >"></el-pagination>

6.自由设定整个组件的布局方式

    <el-pagination :page-size="10" :total="136" background layout="slot,prev,pager,next,->,jumper, sizes, total">
        asdfijasiofj
    </el-pagination>

7.控制一次最多显示多少个分页按钮,可设置为大于等于 5 且小于等于 21 的奇数

     <el-pagination :page-count="10"  background pager-count="5"></el-pagination>

8.分页条数显示

     <el-pagination  :page-size="10" :total="136" background layout="prev,pager,next, sizes" :page-sizes="[1,2,3,4,5,6,20,40,101]">
    </el-pagination>

9.当前显示第几页

    <el-pagination :current-page="3" :page-count="10" background></el-pagination>

如果要使用分页条数的修改，那么分页条最好采用第二种设置总页数的方式，指定一共有多少条数据，以及当前每页显示多少条，让组件自行计算当前有多少页。

实现分页数据加载

• 数据：当前显示第几页数据
• 数据：每页要显示多少条
• 事件：什么时候页码发生了修改
• 事件：什么时候分页条数发生了修改

<template>
  <div>
    <el-table :data="list"  stripe>
         <el-table-column 
            prop="Id"
            label="Id" >
        </el-table-column>
        <el-table-column 
            prop="NickName"
            label="昵称" >
        </el-table-column>
    </el-table>
    
    <el-pagination
      @size-change="loadData()"
      @current-change="loadData()"
      :current-page.sync="currentPage"
      :page-sizes="[1,10,20, 40, 80, 100]"
      :page-size.sync="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalNum"
      background
    ></el-pagination>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      list:[],
      currentPage: 1,
      pageSize: 1,
      totalNum:0,
      keyword:''
    };
  },
  mounted () {
    this.loadData();
  },
  methods: {
      loadData(keyword){
        if (keyword != undefined) {
            this.keyword = keyword;
            this.currentPage=1;
        }
        axios.get('/api/customer/get',{
            params:{
                keyword:this.keyword,
                page:this.currentPage,
                size:this.pageSize
            }
        }).then(res=>{
            this.totalNum=res.data.total;//更新分页条显示的总行数数据
            this.list=res.data.rows; //列表数据更新
        })
      },
    //   /**页码修改 */
    //   currentChange(){
    //       console.log(this.currentPage)
    //       this.loadData()
    //      // console.log(e) //新的页码
    //   },
    //   /**分页条数修改 */
    //   sizeChange(){
    //       this.loadData()
    //       console.log(this.pageSize)
    //      // console.log(e) //新的分页条数
    //   }
  }
};
</script>