VUE+element-ui表格分页解决⽅案
之前⽤过⼀款框架Layui，其中的表格分页
var laypage = layui.laypage;
指向⼀个⽤于存放分页的容器，通过服务端得到⼀些初始值，即可完成分页渲染
最近使⽤element-ui做table遇到了⼀些问题，记录⼀下
表格数据序号问题
<el-table-column label="序号" type="index" show-overflow-tooltip width="50" align="center">
</el-table-column>
设置 type="index"即可，show-overflow-tooltip 当内容过长被隐藏时显⽰ tooltip
<el-table
:data="EnterpriseList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
:
header-cell-
highlight-current-row
@current-change="handleTableChange"
>
:data=“EnterpriseList.slice((currentPage-1)pagesize,currentPage pagesize)” 是设置分页数据中最重要的属性，在不同分页显⽰不同的数据
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
vue element admin
:current-page="currentPage"
:page-sizes="[5, 10, 20, 30]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
分页组件属性配置如上，对应methods中的回调函数如下
methods:{
handleSizeChange(val){
this.pagesize = val
console.log(this.pagesize);
},
handleCurrentChange(val){
this.currentPage = val
console.log(this.currentPage);
},
pagesize:10 ,currentPage: 1为data中的默认页⾯容量及当前页⾯，根据⾃⼰的业务配置即可
computed:{
...mapState(['EnterpriseList']),
total(){
return this.EnterpriseList.length
}
},
total总页数由接⼝返回数据长度计算⽽来

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。