40、使用elementUI分别实现前端,后端表格分页
说明:前端单独做的表格分页—用于解决数据过多页面渲染压力,如果是服务器响应数据过慢,使用第二种分页方法–后端分页。以下为分页效果
(图片来源网络,侵删)
一、前端分页
1、创建表格
说明:slice(a,b)的作用是从已有的数组中返回选定的元素"a"表示开始,"b"表示结束。 而currentPage和pageSize在此网页的作用会在接下来进行说明。
2、创建分页
说明分页器绑定变量说明:
:current-page的值表示当前是第几页;
:page-sizes的值表示可以选择一页多少条;
:page-size的值表示当前一页显示几条;
layout的值表示分页需要显示的内容,例如“total” 表示总数、“next” 表示下一页等;
:total的值表示共多少条数据;
根据变量pageSize值,以及当前页变量currentPage,在界面上会自动把分的页显示出来,如上图中的:1、2、3……6…。
3、在data中定义变量
data() { return { tableData: [], tableHead: [ {name: "母线名称", value: 'busName', }, {name: "电压等级", value: 'voltageLevel', }, {name: "开始时间", value: 'startDate', }, {name: "恢复时间", value: 'recoverDate', }, {name: "持续时间(分钟)", value: 'continuedDate', }, {name: "越限类型", value: 'limitType', }, {name: "越限极值", value: 'limitValue', }, ], currentPage: 1, // 当前页码 total: 20, // 总条数 pageSize: 2, // 每页的数据条数 }; },
4、 添加事件
methods: { //每页条数改变时触发 选择一页显示多少行 handleSizeChange(val) { console.log(`每页 ${val} 条`); this.currentPage = 1; this.pageSize = val; }, //当前页改变时触发 跳转其他页 handleCurrentChange(val) { console.log(`当前页: ${val}`); this.currentPage = val; } }
5、完整前端分页代码展示
export default { data() { return { tableData: [ { busName:"xxx", voltageLevel:"", startDate:"", recoverDate:"", continuedDate:"", limitType:"", limitValue:"", },{ busName:"xxx", voltageLevel:"", startDate:"", recoverDate:"", continuedDate:"", limitType:"", limitValue:"", },{ busName:"xxx", voltageLevel:"", startDate:"", recoverDate:"", continuedDate:"", limitType:"", limitValue:"", },{ busName:"xxx", voltageLevel:"", startDate:"", recoverDate:"", continuedDate:"", limitType:"", limitValue:"", },{ busName:"xxx", voltageLevel:"", startDate:"", recoverDate:"", continuedDate:"", limitType:"", limitValue:"", },{ busName:"xxx", voltageLevel:"", startDate:"", recoverDate:"", continuedDate:"", limitType:"", limitValue:"", },{ busName:"xxx", voltageLevel:"", startDate:"", recoverDate:"", continuedDate:"", limitType:"", limitValue:"", }, ], tableHead: [ {name: "母线名称", value: 'busName', }, {name: "电压等级", value: 'voltageLevel', }, {name: "开始时间", value: 'startDate', }, {name: "恢复时间", value: 'recoverDate', }, {name: "持续时间(分钟)", value: 'continuedDate', }, {name: "越限类型", value: 'limitType', }, {name: "越限极值", value: 'limitValue', }, ], currentPage: 1, // 当前页码 total: 20, // 总条数 pageSize: 2, // 每页的数据条数 }; }, mounted() { }, methods: { // 表格分页---前端分页 //每页条数改变时触发 选择一页显示多少行 handleSizeChange(val) { this.currentPage = 1; this.pageSize = val; }, //当前页改变时触发 跳转其他页 handleCurrentChange(val) { this.currentPage = val; }, } }; .v-table { //分页样式 .block-box{ width: 100%; height: 50px; margin-top: 10px; display: flex; justify-content: center; align-items: center; } }
二、后端分页
后端分页就是,根据前端所给后端传的两个参数处理判断响应数据,第一参数:每一页多少条数据pageSize,第二个参数:当前所选中的页码currenPage,进行
说明:表格模板代码以及分页器代码创建步骤同上,唯一不同就是总表格数据条数:total不就是后端响应的表格数据长度,需要后端另外返回表格数据总数;否则分页器只显示第1页。
1、js代码
methods: { //表格分页操作 //每页条数改变时触发 选择一页显示多少行 handleSizeChange(val){ this.pageSize = val; this.params = { pageSize:this.pageSize, currentPage:this.currentPage, } this.getDialogData(val,this.currentPage,this.dialogTableUrl, this.params); }, //当前页改变时触发 跳转其他页 handleCurrentChange(val){ this.currentPage = val; this.params = { pageSize:this.pageSize, currentPage:this.currentPage, } this.getDialogData(this.pageSize,val,this.dialogTableUrl, this.params); }, getDialogData(pageSize,currentPage,url, params) { getRequestData(url, 'get', params).then((res) => { if (res.status == 200){ let data = res.data.data; this.total = data.num;//总数据条数 this.tableData = data.list } }) }, }
3.完整后端分页代码
export default { data() { return { tableData: [ { busName:"xxx", voltageLevel:"", startDate:"", recoverDate:"", continuedDate:"", limitType:"", limitValue:"", },{ busName:"xxx", voltageLevel:"", startDate:"", recoverDate:"", continuedDate:"", limitType:"", limitValue:"", },{ busName:"xxx", voltageLevel:"", startDate:"", recoverDate:"", continuedDate:"", limitType:"", limitValue:"", },{ busName:"xxx", voltageLevel:"", startDate:"", recoverDate:"", continuedDate:"", limitType:"", limitValue:"", },{ busName:"xxx", voltageLevel:"", startDate:"", recoverDate:"", continuedDate:"", limitType:"", limitValue:"", },{ busName:"xxx", voltageLevel:"", startDate:"", recoverDate:"", continuedDate:"", limitType:"", limitValue:"", },{ busName:"xxx", voltageLevel:"", startDate:"", recoverDate:"", continuedDate:"", limitType:"", limitValue:"", }, ], tableHead: [ {name: "母线名称", value: 'busName', }, {name: "电压等级", value: 'voltageLevel', }, {name: "开始时间", value: 'startDate', }, {name: "恢复时间", value: 'recoverDate', }, {name: "持续时间(分钟)", value: 'continuedDate', }, {name: "越限类型", value: 'limitType', }, {name: "越限极值", value: 'limitValue', }, ], currentPage: 1, // 当前页码 total: 20, // 总条数 pageSize: 2, // 每页的数据条数 }; }, mounted() { }, methods: { // 表格分页---前端分页 //每页条数改变时触发 选择一页显示多少行 handleSizeChange(val) { this.currentPage = 1; this.pageSize = val; }, //当前页改变时触发 跳转其他页 handleCurrentChange(val) { this.currentPage = val; }, } }; .v-table { //分页样式 .block-box{ width: 100%; height: 50px; margin-top: 10px; display: flex; justify-content: center; align-items: center; } }
(图片来源网络,侵删)
(图片来源网络,侵删)
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。
还没有评论,来说两句吧...