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似乎可以自定义函数:

Table-column Attributes.png

于是我们就有办法了,分页不变,表格添加动态生成index的方法:

<el-table :data="tableData" border>
  <el-table-column
    type="index" 
    :index="indexMethod"
    label="序号"
    header-align="center" 
    align="center">
  </el-table-column>
</el-table>

表格生成对应条数的序号,用到分页的currentPagelimit

indexMethod (index) {
  return (index + 1) + (this.currentPage - 1) * (this.limit)
}
上一篇下一篇

猜你喜欢

热点阅读