Vue+elementUI实现Table表格分页效果
在毕业项目书写时，需要实现分页效果，而查找了大部分资料，大多是静态Table表格的分页，而该项目的数据大多是后台查询后的动态数据，于是我参考了网上的方法，并进行了一系列的修改后，实现了我的需求，在此，做一个简单的记录，方便日后的巩固学习。
以管理员端admin管理列表为例，
首先是表格，使用:data="tableDate"与数据中的tableDate绑定
<el-table:data="tableData"borderstyle="width: 100%; margin-top:20px;"><el-table-columntype="selection"width="55"></el-table-column><el-table-columnfixedprop="id"label="id"width="200"></el-table-column><el-table-columnprop="name"label="管理员账户名"width="250"></el-table-column><el-table-columnprop="pwd"label="密码"width="220"></el-table-column><el-table-columnprop="phone"label="手机号"width="300"></el-table-column><el-table-columnfixed="right"label="操作"width="200"><template slot-scope="scope"><el-button type="text" size="small" icon="el-icon-edit" @click="handleEdit(scope.$index,scope.row)">编辑</el-button><el-button type="text" size="small" icon="el-icon-delete" @click="handleDelete(scope.$index,scope.row)">删除</el-button></template></el-table-column></el-table>
分页组件代码如下：
<el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[5,10,15,30,50,100]":page-size="5"layout="total, sizes, prev, pager, next, jumper":total="totalCount"></el-pagination>
data中分页所需的数据,
data() {return {// 当前页码，初始页码为1currentPage:1,// 总数据条数，根据接口获取数据长度(注意：这里不能为空)totalCount:1,// 个数选择器，可选择的单页数据条数pageSizes:[5,10,15,30,50,100],// 每页显示的条数PageSize:5,//当前页表格数据tableData: [{id: 111,name: 'aa',pwd: 'aa123456',phone: '12345678985',}],//全部表格数据allTableData: [{id: 111,name: 'aa',pwd: 'aa123456',phone: '12345678985',}],}}
methods、created的相关方法
methods: {// 分页// 每页显示的条数handleSizeChange(PageSize) {// 改变每页显示的条数this.PageSize=PageSize// 每次变换单页条数后，将页面切换至第一页this.currentPage=1// 获取第一页数据this.handleCurrentChange(1);},// 显示当前页数据handleCurrentChange(currentPage) {// 更新当前页数据this.currentPage=currentPage;//每页数据量let pageSize = this.PageSize;console.log("显示"+currentPage+"列,每页有"+pageSize+"条数据"+(((currentPage-1)*pageSize)+1)+"-"+(currentPage*pageSize));//首先清空table表绑定的数据this.tableData=[];//获取当前页数据范围： （当前页-1）*每页数据 - 当前页*每页数据this.tableData=this.allTableData.slice((((currentPage-1)*pageSize)),(currentPage*pageSize));//方便后台查看表单数据//console.log("tableData");//console.log(this.tableData);//console.log("allTableData");//console.log(this.allTableData);},findAll() {const that = this;//通过get方法获取后台数据，findAll查询所有数据this.axios.get('http://localhost:8080/vue/admin/findAll', {params:{id: this.id,name: this.name,pwd: this.pwd,phone: this.phone,}}).then(res => {console.log("请求成功，得到返回结果:")console.log(res);//将获取到的所有数据存储到allTableData中，方便分页时进行截取that.allTableData = res.data;// 将数据的长度赋值给totalCountthat.totalCount=res.data.length;// 显示第一页that.handleCurrentChange(1);console.log(that.tableData);}).catch(function () {console.log("请求失败！")});},},created() {this.findAll();// 页面加载前查询所有数据},
效果展示
