element-ui配合分页自定义表格序号
2019-04-10 本文已影响0人
chenjundi
先介绍下currentPage
代表当前页数,limit
代表每页显示条目个数,count
代表总条目数。
要实现表格生成序号其实element
官网已经帮我们实现了type=index
,效果就是不管当前页数是几,序号永远从1开始。
举个栗子:
currentPage
为1,limit
为10,第一页的序号就是1-10,第二页也是1-10,以此类推。
// 表格
<el-table :data="tableData" border>
<el-table-column
type="index"
label="序号"
header-align="center"
align="center">
</el-table-column>
</el-table>
// 分页
<el-pagination
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-size="limit"
layout="total, prev, pager, next"
:total="count">
</el-pagination>
现在假设我们count
为99,我们需要的序号也是1-99,那么type=index
就满足不了我们的需求了,怎么办呢,看官网,index
似乎可以自定义函数:
于是我们就有办法了,分页不变,表格添加动态生成index
的方法:
<el-table :data="tableData" border>
<el-table-column
type="index"
:index="indexMethod"
label="序号"
header-align="center"
align="center">
</el-table-column>
</el-table>
表格生成对应条数的序号,用到分页的currentPage
和limit
:
indexMethod (index) {
return (index + 1) + (this.currentPage - 1) * (this.limit)
}