element组件 表格索引不连续问题 解决办法

407 阅读1分钟

表格序号

组件上复制的表格。无论第几页,他的序号一直都是1开头的。就像这样↓,他是根据索引来排序的。如果我们使用分页加上表格的话 这样的话就显示的不太好看。。。

image.png

而我们想让他的序号连续显示。那么怎么实现呢?

首先,我们应该知道他为什么是连续的?

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

那么解决办法是?

image.png 代码实现

方法1.

    <el-table-column label="序号" width="80">
            <template slot-scope="scoped">
              {{ size * (page - 1) + (scoped.$index + 1) }}
            </template>
          </el-table-column>

方法2.


<el-table-column type="index" :index="indexMethod" label="序号" width="80" />
   indexMethod(index) {
      return index + 1 + (this.paramsObj.page - 1) * this.paramsObj.size
    }