element-ui el-table分页后设置连续的索引(如排行榜)

在Element UI的el-table组件中，如果需要在分页后设置连续的索引（例如排行榜的序号），可以通过计算当前页的起始索引和结束索引来实现。

以下是一个简单的示例，展示了如何在分页后设置连续索引：

<template>
  <el-table
    :data="tableData"
    stripe
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column
      type="index"
      label="排名"
      width="50"
      :index="indexMethod"
    ></el-table-column>
    <!-- 其他列 -->
  </el-table>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 30, 40]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
  ></el-pagination>
</template>
 
<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
    };
  },
  methods: {
    indexMethod(index) {
      const startIndex = (this.currentPage - 1) * this.pageSize + 1;
      return startIndex + index;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentChange(this.currentPage);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.currentChange(val);
    },
    currentChange(val) {
      // 假设获取数据的API支持分页
      const params = {
        page: val,
        pageSize: this.pageSize,
      };
      // 模拟请求数据
      this.fetchData(params);
    },
    fetchData(params) {
      // 这里使用setTimeout模拟异步请求
      setTimeout(() => {
        const total = 100; // 假设总数据量
        this.total = total;
        this.tableData = Array.from({ length: this.pageSize }, (_, index) => ({
          name: `User ${index + (params.page - 1) * params.pageSize + 1}`,
          // 其他数据...
        }));
      }, 1000);
    },
    handleSelectionChange(selection) {
      // 处理选中项
    },
  },
  mounted() {
    this.currentChange(1); // 初始化加载第一页数据
  },
};
</script>

在这个示例中，indexMethod是一个自定义的索引方法，它计算当前行在当前