当前位置：首页 > news >正文

Vue中使用el-table自定义序号翻页后又从1开始没有连续

news 来源：原创 2025/5/2 2:50:56

在 el-table 中，自定义序号列在翻页后会重新从 1 开始是因为每页的数据是重新渲染的，没有保留之前的序号。如果您希望在翻页后保持连续的序号，可以使用 index 属性来获取全局的行索引。

以下是一个示例，演示如何使用 index 属性来实现连续的序号：

<template>
  <el-table :data="tableData">
    <el-table-column label="序号">
      <template slot-scope="scope">
        <span>{{(currentPage-1) * pageSize + scope.$index + 1}}</span>
      </template>
    </el-table-column>
    <!-- 其他列定义 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示的数据条数
      // 其他数据属性
    };
  },
  // 其他方法和钩子函数
};
</script>

在这个示例中，我们使用了 slot-scope 来获取每一行数据的索引，并结合当前页码和每页显示的数据条数来计算连续的序号。currentPage 和 pageSize 是从外部传入的当前页码和每页显示的数据条数，您可以根据实际情况进行设置。

通过这种方式，无论翻页还是其他操作，序号都会保持连续。注意，如果您使用了筛选、排序等功能，可能需要对序号进行相应的调整。