el-table分页后序号连续的两种方法

最新推荐文章于 2024-03-15 09:31:50 发布

刚刚好ā

最新推荐文章于 2024-03-15 09:31:50 发布

阅读量2.3k

点赞数 1

本文链接：https://blog.csdn.net/weixin_43312391/article/details/132292377

版权

实现效果：

第一页排序到10，第二页的排序应从11开始

实现方法一：

在el-table的序号列中使用template定义

<el-table>
  <el-table-column
          min-width="10%"
          label="序号"
        >
      <template slot-scope="scope">
            <span>{{(currentPage - 1) * pageSize + scope.$index + 1}}</span>
       </template>
  </el-table-column>
</el-table>

实现方法二：

在el-table的序号列中进行index的方法定义，本质上还是进行了当前页码数乘以每页条数后加1的操作。

<el-table-column label="序号" type="index" :index="indexAdd" width="50" />

在methods中：

indexAdd(index) {
      const page = this.pageParams.page // 当前页码
      const pagesize = this.pageParams.pagesize // 每页条数
      return index + 1 + (page - 1) * pagesize
}