之前用过一款框架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-style="{background:'#eef1f6',color:'#606266'}"
highlight-current-row
@current-change="handleTableChange"
>
:data=“EnterpriseList.slice((currentPage-1)pagesize,currentPagepagesize)” 是设置分页数据中最重要的属性,在不同分页显示不同的数据
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
: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总页数由接口返回数据长度计算而来