Vue element-ui中table表格，实现自增序号

不说废话，直接上完整代码

记录一下

代码解释

el-table 组件的一部分，用于在表格中显示一列数据。你想在表格中实现一个序号列，并且通过 index 属性来计算和显示序号。

以下是代码的解释和序号实现的方式：

<el-table-column
  align="center"
  :index="1 + pageSize * (currentPage - 1)"
  label="序号"
  type="index"
  width="60"
></el-table-column>

1. align="center": 设置列内容的对齐方式为居中。
2. :index="1 + pageSize * (currentPage - 1)": 使用 Vue 的动态绑定来计算序号的起始值。这里的 index 属性是用来显示序号的。
3. label="序号": 设置列标题为“序号”。
4. type="index": 指定列的类型为序号类型，这样 Element Plus 会自动生成序号。
5. width="60": 设置列的宽度为 60 像素。

序号实现

在 el-table-column 中使用 type="index" 时，Element Plus 会自动为该列生成序号。你所做的动态绑定是为了调整序号的起始值。具体来说，index 属性的计算方式如下：

• pageSize: 每页显示的条目数。
• currentPage: 当前页码。

计算公式 1 + pageSize * (currentPage - 1) 主要是用于计算当前页的起始序号。例如，如果每页显示 10 条数据，当前页是第 2 页，那么第一个数据项的序号是 1 + 10 * (2 - 1) = 11。这样，序号从 11 开始递增。

注意

• 如果你的序号从 1 开始，而不是从 0，确保你的计算公式是正确的。通常 index 的值应该是由 Element Plus 自动管理的，只需要在 el-table 组件中配置好 type="index" 即可自动生成序号。动态设置 index 值可能会导致问题。

完整示例

确保你的表格组件设置正确，以下是一个完整的使用示例：

<template>
  <el-table :data="tableData" :pagination="pagination" style="width: 100%">
    <el-table-column
      align="center"
      type="index"
      label="序号"
      width="60"
    ></el-table-column>
    <!-- 其他列定义 -->
  </el-table>
</template>

<script setup lang="tsx">
import { ref } from 'vue'
const tableData = ref([]) // 表格数据
const pageSize = ref<number>(10)
const currentPage = ref<number>(1)
</script>

在这个例子中，type="index" 会自动生成序号，不需要手动设置 index 属性。