Vue+ElementUI 表格页序号延续递增

需求：表格第一列为自增序号（不受分页影响）

效果图：

 

实现方法一：

<el-table-column label="序号" width="100" align="left">
   <template slot-scope="scope">
    {{ (scope.$index+1)+(current-1)*pageSize }}
   </template>
 </el-table-column>

 current: 1, // 当前页码
 total: 0,
 pageSize: 10,  // 每页显示多少条

注意：需结合每页条数及当前页码计算

实现方法二：（实现表格翻页序号递增/延续）

效果图：

 

index属性写明了，如果设置了 type=index ，那么可以通过传递 index 属性来自定义索引：

<template>
 <div> 
  <el-table-column type="index" label="序号" width="100" :index="indexMethod">
  </el-table-column>
 </div>
</template>

<script>
  export default {
	data() {
     return {
      // 实现分页
      current: 1, // 当前页码
      total: 0,
      pageSize: 10,  // 每页显示多少条
    }
  },
   methods: { 
    //序号递增
    indexMethod(index) {
      let limitpage = this.pageSize; // 每页条数
      let curpage = this.current; // 当前页码
      return index + 1 + (curpage - 1) * limitpage;
    },
      }
	}
</script>

以上是2种实现方法，可参考~