ElementUI Pagination 分页器绑定数据

1.el-table绑定数据

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

添加 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>

data中添加相应参数

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

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

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

在页面加载时添加总数量

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

设置表格翻页的序号递增

<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; // 返回表格序号 },

总结

以上是生活随笔为你收集整理的ElementUI Pagination 分页器绑定数据的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。