antd-vue table如何设置序号

在 Ant Design Vue (antd-vue) 的 Table 组件中设置序号可以通过使用 `scopedSlots` 或者 `slotProps` （取决于你使用的 Ant Design Vue 版本）来自定义每一行的数据渲染，从而添加序号列。以下是一个基本示例，展示了如何在 antd-vue 的 Table 中添加一个序号列：

<template>
  <a-table
    :columns="columns"
    :data-source="dataSource"
    :pagination="false" <!-- 或根据需要配置分页 -->
  >
    <!-- 自定义序号列 -->
    <template #bodyCell="{ column, text, record, index }">
      <!-- 当前列是序号列时，显示序号 -->
      <span v-if="column.dataIndex === 'serialNumber'">{{ index + 1 }}</span>
      <!-- 其他列正常显示 -->
      <span v-else>{{ text }}</span>
    </template>
  </a-table>
</template>

<script>
export default {
  data() {
    return {
      dataSource: [
        // 你的数据数组
      ],
      columns: [
        // 序号列，注意这里不需要绑定具体的数据字段
        {
          title: '序号',
          dataIndex: 'serialNumber', // 这个dataIndex仅作为标识，不对应实际数据字段
          width: '80px', // 可以自定义宽度
          scopedSlots: { customRender: 'bodyCell' }, // 对应模板中的具名插槽
        },
        // 其他列...
        {
          title: '姓名',
          dataIndex: 'name',
        },
        // 更多列...
      ],
    };
  },
};
</script>

### 注意事项

- 上述代码示例适用于较新的 Ant Design Vue 版本，其中使用了具名插槽 (`#bodyCell`) 和 `slotProps` 来传递当前单元格的信息。
- 如果你使用的是较旧的版本，可能需要使用 `scopedSlots` 而不是 `#bodyCell` 的模板语法。
- `index` 参数在渲染时自动提供，表示当前行的索引，从0开始。因此，使用 `index + 1` 来显示用户习惯的从1开始的序号。
- 分页情况下，如果需要序号随着分页变化而正确显示，确保在分页切换时序号能重新计算。如果后端返回的数据已经是带有正确序号的，那么前端可能不需要额外处理序号的计算逻辑。