element-ui的el-table中添加递增序号

 

 效果如上所示，

不论在表格中如何新增删除表格数据，序号总是从1开始递增排序，原理是根据表格分页中当前页数与当前页条数来计算的。

 

<el-table-column label="序号" prop="" width="180" align="center">
  <template slot-scope="scope">
    <span v-text="getIndex(scope.$index)"> </span>
  </template>
</el-table-column>

//获取表格序号
getIndex($index) {
  return (this.page.currentPage - 1) * this.page.pageSize + $index + 1
},

 

需要添加一个page分页即可。