如何解决翻页后序号不连续问题

790 阅读1分钟

场景

vue中使用element表格翻页后,序号重新从1开始排序

image.png

解决方案

<el-table :data="role">
  <el-table-column
    type="index"
 +  :index="currentIndex"
    label="序号"
    width="120"
  />
  <el-table-column prop="name" label="角色名称" width="240" />
  <el-table-column prop="description" label="描述" />
  <el-table-column label="操作">
    ...
  </el-table-column>
</el-table>
export default {
  data() {
    return {
      role: [],
      pageParams: {
        page: 1,
        pagesize: 2
      },
      ...
    }
  },
  methods:{
    // 计算当前页面
    // (当前页-1) * 每一页的条目个数 + 当前页每条数据的索引值 + 1
    currentIndex(index) {
      return (this.pageParams.page - 1) * this.pageParams.pagesize + index + 1
    },
    ...
  }
}

解决后

image.png