使用 表格组件为第一列添加索引

在使用 ant-design-vue Table 组件的时候，设置第一列为索引列不像其他组件库有很方便的属性，ant-design-vue 并没有提供相关属性，需要通过自定义列的方式来实现。

第一种（没有实现）

根据 ant-design-vue 的文档，表格组件 columns 对象上有一个 customRender 参数：

它是一个函数，接收三个参数，分别是当前行的值，当前行数据，行索引
相关代码

const columns = [
  {
    title: '序号',
    key: 'index',
    customRender: (text, record, index) => index
  }
]

效果如图

发现并没有实现，又去网上查找问题，有一个解决方案：
相关代码

const columns = [
  {
    title: '序号',
    key: 'index',
    customRender: (text, record, index) => `${index + 1}`
  }
]

在模板运算符书写 js 变量 index + 1，效果如图：
也没有实现,然后我打印这个 index

const columns = [
  {
    title: '序号',
    key: 'index',
    customRender: (text, record, index) => {
      console.log('index:' + index)
    }
  }
]

打印结果：

undefined！
第一种方法没有实现

第二种

不再使用 customRender 参数，而是通过 bodyCell 参数：

它是一个插槽，有三个参数分别是当前行的值，当前行数据，行索引
相关代码

<a-table>
	<template #bodyCell="{ column, record, index }">
	      <!-- 索引列 -->
	      <template v-if="column.key === 'index'">{{ index + 1 }}</template>
	 </template>
 </a-table>

实现效果

成功！