vue问题：怎样实现el-table表格索引的翻页递增显示

素材编辑 | 宋大狮

排版运营 | 小唐狮

ONE 问题描述

今天要和大家分享的是vue的问题，主要是关于element中table组件数据展示时，对索引进行翻页递增显示。

需求：默认展示一页10条数据，切换第一页时，表格数据索引为1-10，切换第二页时，表格数据索引递增为11-20。

问题：切换第一页时，表格数据索引为1-10，切换第二页时，表格数据索引依旧展示为1-10。

TWO 解决过程

尝试一：

思路：考虑后端解决，在返回数据时添加对应索引值。

实现：考虑到减轻前端负担、有问题找后端的原则，很自然的就跑去找后端提需求，但与后端交流后，很快得到了拒绝，原因是由于筛选功能的存在，无法给数据库中的每条数据设置固定的索引值，否则在筛选展示时，会造成索引错位的问题。

结果：后端搞不了，那就只能前端自力更生了。

尝试二：

思路：循环为每条数据添加对应索引值。

实现：在接口响应成功处，用forEach循环为响应数据的每一项，都添加一个计算后的index索引属性，并在表格序号展示处添加prop="index"属性。其中，计算公式是固定的：item.index=(index+1)+ (this.dataForm.currentPage-1)*this.dataForm.limit为循环下标，currentPage 为当前页码，limit为每页要展示的条数。注意，关于分页的修改：在条数切换回调函数处，将currentPage 、page都要置为1，在页数切换回调函数处，将currentPage 置为page的值。

结果：成功实现表格所有数据索引的递增显示。

THREE 知识总结

总结一：问题复盘

在做table组件数据展示时，对索引进行翻页递增显示，需要先在表格序号展示处添加prop="index"属性，再在接口响应成功处，用forEach循环为响应数据的每一项，都添加一个计算后的index索引属性，计算公式是固定的：item.index=(index+1)+ (this.dataForm.currentPage-1)*this.dataForm.limit。

总结二：索引的翻页递增显示代码

template代码：

<el-table-column 
 prop="index" 

:label="$t('ebc.serial_Number')"
 header-align="center"
 align="center"
 width="60">

</el-table-column>

script代码：

     baseService
        .get()
        .then((res) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }

          this.dataListLoading = false;

          // 改变序号
          res.data.list.forEach((item: any, index: number) => {
            item.index = index + 1 + (this.dataForm.currentPage - 1) * this.dataForm.limit;
          });

          this.dataList = res.data.list;
          this.dataForm.total = res.data.total;
        });

FOUR 集思广益

欢迎大家对本问题留言或私信指教，一起学习提高！

- END -

ABOUT 关于作者

• 宋大狮 | 执着于理想，纯粹与当下

• 小唐狮 | 广场舞大军中最靓的仔