element-ui的table搭配Pagination 处理分页序号问题

最新推荐文章于 2023-10-12 10:18:53 发布

fishssss

最新推荐文章于 2023-10-12 10:18:53 发布

阅读量336

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/minnyYu/article/details/128475115

版权

<el-table :data="roles">
    <el-table-column label="序号" width="120" type="index" :index="indexMethod" />
</el-table>

table表格通过给 type=index 的列传入 index 属性，可以自定义索引。该属性传入数字时，将作为索引的起始值。也可以传入一个方法，它提供当前行的行号（从 0 开始）作为参数，返回值将作为索引展示。

index作为方法时行号是从0开始，要从1开始+1即可，要实现切换下一页序号延续上一页序号，可以使用index传入方法，返回前面页面的总行数+1

// 每页序号延续
indexMethod(index) {
      // table的index属性为方法时 序号从0开始
      // 序号加1从1开始 + 前面页数的条数总数
      // 前面页数 : 当前页数-1,乘以每页行数
      return index + 1 + (this.curPage - 1) * this.pageSize
}

效果：