Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
最近使用 Vite + Vue3 组合式 API 开发项目时，采用 Ant Design Vue V3 版本，在配置 table 数据时，发现 API 及用法变化很大。
首先是废除了 column 配置中的 scopedSlots 与 slots 属性。但是在使用时页面虽然可以正常渲染，打开控制台却有如下报错信息：
查了相关资料，是由于 and3 table 即将废除 slots 写法，所以在最新的 V2 版本中也不再推荐使用。
官方版本提示：2.x 版本是为了兼容 Vue 3 开发的兼容版本，他并没有带来很多新的特性，大多数的 API 改变也只是为了更好的兼容 Vue 3。 3.x 版本在性能、易用性、功能上都有了很大的提升，3.x 版本稳定后，我们会归档 2.x 版本，建议您尽快升级 3.x 版本。虽然有很多改动，但基本都做了兼容，你可以按照控制台给出的警告逐步升级。
1. 关于原代码写法
column参数 说明 类型
slots 使用 columns 时，可以通过该属性配置支持 slot 的属性，如 slots: { filterIcon: ‘XXX’} object
scopedSlots 使用 columns 时，可以通过该属性配置支持 slot-scope 的属性，如 scopedSlots: { customRender: ‘XXX’} object
脚本：
const columns = reactive([{ dataIndex: 'tid', title: "序号", align: "center" }, { dataIndex: 'tname', title: "姓名", align: "center" }, { dataIndex: 'tgender', title: "性别", align: "center" }, { dataIndex: 'tage', title: "年龄", align: "center" }, { dataIndex: 'operation', title: "操作", align: "center", slots: { customRender: 'operation' } } ])
模板：
<a-table class="table" bordered :dataSource="data" :columns="columns"> <template #operation> <a-button>删除</a-button> </template> </a-table>
需要注意的是，此写法确实是官方的写法，如下：
不过官方在大版本更新处还是给出了如下的提示，算是提前的版本切换了
2. V3 版本的写法
利用 bodyCell、headerCell 个性化单元格（table属性）
table参数 说明 类型
headerCell 个性化头部单元格 v-slot:headerCell=“{title, column}”
bodyCell 个性化单元格 v-slot:bodyCell=“{text, record, index, column}”
模板
<a-table class="table" bordered :dataSource="data" :columns="columns"> <template #bodyCell="{column,record,index}"> {{column}} ~ {{ record }} ~ {{index}} <a-button v-if="column.dataIndex === 'operation'">删除</a-button> </template> </a-table>
脚本
const columns = reactive([{ dataIndex: 'tid', title: "序号", align: "center" }, { dataIndex: 'tname', title: "姓名", align: "center" }, { dataIndex: 'tgender', title: "性别", align: "center" }, { dataIndex: 'tage', title: "年龄", align: "center" }, { dataIndex: 'operation', title: "操作", align: "center", } ])
这里不再使用 column.slots 配置支持 slot 的属性
如上，通过 v-if 判断对应列应该显示的内容，否则全部列都会展示数据。
你在使用的过程中，碰到哪些需要填的坑，或者有什么好的解决办法呢？
