如何使element-ui中table表格的索引延续（分页效果的序号）

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：

---

提示：以下是本篇文章正文内容，下面案例可供参考

一·问题图示及描述

问题描述：
从上图中可以看出，在使用element-ui中table表格的type='index’属性做分页效果时，无论点击的多少页，表格的序号都是从1开始排列的。

二·问题分析

首先表格中自带一个 type= ‘index’,这个属性可以是当前列 以索引 1,2,3,4,5 代替,但每一页它都会重置,有没有一种方法可以是他继承上一页的index呢 ,其实组件表单中给了一种方法

  <el-table-column
      type="index"
      :index="indexMethod">
  </el-table-column>

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

 我们知道当给定 indexMethod为一个值时,当前页面会根据indexMethod的值为起始值来递增 

    假设给定值25,则当前页面的序号就为25,26,27,28,29,30  

那么就出现了一个问题,我们怎么知道当前页面应该给什么初始值

我自己的一个解决方案是,根据当前分页来计算

当我们选择第二页是,indexMethod的值就应该为前面的页数乘每页多少条 代码如下: 用计算属性最为合适

 computed: {
    indexMethod: function() {
        return (this.pagination.page - 1) * (this.pagination.pagesize) + 1
       }
 }

前面的页数就是当前页数-1 , 而indexMethod的初始值会作为当前页面的第一个值,所以最后该值要+1

三·问题解决效果图

总结

自定义索引的序号值，是通过第几页和每一页有多少条数据来决定的，所以我们可以使用计算属性：computed