数字化管理平台

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'  }  } ])

模板：

   删除

需要注意的是，此写法确实是官方的写法，如下：

不过官方在大版本更新处还是给出了如下的提示，算是提前的版本切换了

2. V3 版本的写法

利用 bodyCell、headerCell 个性化单元格（table属性）

table参数 说明 类型

headerCell 个性化头部单元格 v-slot:headerCell=“{title, column}”

bodyCell 个性化单元格 v-slot:bodyCell=“{text, record, index, column}”

模板

   { {column}} ~ { { record }} ~ { {index}}  删除

脚本

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 判断对应列应该显示的内容，否则全部列都会展示数据。

你在使用的过程中，碰到哪些需要填的坑，或者有什么好的解决办法呢？