解决element-ui中的分页插件索引只在当前页面排序的问题。

废话不多说，直接上代码了。

1、页面代码

<el-table :data="tableData.slice((pageHelper.currentPageNum-1)*pageHelper.pageSize,pageHelper.currentPageNum*pageHelper.pageSize)"
          max-height="500" border stripe style="width: 100%" tooltip-effect="light"
          highlight-current-row>
  <el-table-column type="index"  :index="indexMethod" width="50" align="center">
  </el-table-column>
</el-table>

<div class="block" align="center" style="margin-top: 10px">
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="pageHelper.currentPageNum"
      :page-sizes="pageHelper.pageSizeList"
      :page-size="pageHelper.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageHelper.totalSize">
  </el-pagination>
</div>

2、定义数据，如果是vue，直接将下面代码拷贝放到  data中。

pageHelper:{
  currentPageNum:1,
  pageSize: 5,
  pageSizeList:[5,10,20,50,100],
  totalSize: 0,
}

3、定义函数，前面两个是分别给页面宽度、当前页赋值的函数，最重要的是第三个函数，自定义table中的 :index,指定特殊的索引方法。

<el-table-column type="index" :index="indexMethod" width="50" align="center"> </el-table-column>

handleSizeChange(val) {
  //console.log(`每页 ${val} 条`);
  this.pageHelper.pageSize=val;
},
handleCurrentChange(val) {
  //console.log(`当前页: ${val}`);
  this.pageHelper.currentPageNum=val;
},
//解决索引只排序当前页的问题,增加函数自定义索引序号
indexMethod(index){
  return (this.pageHelper.currentPageNum-1)*this.pageHelper.pageSize+index+1;
}

 

到此，完美解决啦，另外，还有一个bug,不知道大家能不能发现。有兴趣可以联系交流。