ElementUI Pagination 分页器绑定数据

1.el-table绑定数据

<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"height="auto"borderstripestyle="width: 100%">

2. 添加 el-pagination分页

<div class="block"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[5, 10, 15, 20]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="totalNum"></el-pagination>
</div>

3. data中添加相应参数

data(){
    return {
    tableData: [],  //数据currentPage: 1,//默认显示第一页pageSize:5,//默认每页显示5条totalNum: 100 //总页数}
}

4. 添加跳页面和修改每页个数的动态函数

handleSizeChange(val) {
    console.log(`每页 ${
      val} 条`);this.pageSize = val;    //动态改变
},
handleCurrentChange(val) {
    console.log(`当前页: ${
      val}`);this.currentPage = val;    //动态改变
}

5. 在页面加载时添加总数量

created(){
    this.totalNum=this.tableData.length;
}

6. 设置表格翻页的序号递增

<el-table-column type="index" :index="indexMethod" align="center" label="序号" width="50"></el-table-column>//方法写在methods里面
indexMethod (index) {
    let currentPage = this.paginationData.currentPage; // 当前页码let pageSize = this.paginationData.pageSize; // 每页条数return (index + 1) + (currentPage - 1) * pageSize; // 返回表格序号
},