【Ant Design Vue V3版本填坑记录一】Table 组件 column.slots 报错-阿里云开发者社区

【Ant Design Vue V3版本填坑记录一】Table 组件 column.slots 报错

2023-06-29 713

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【Ant Design Vue V3版本填坑记录一】Table 组件 column.slots 报错

数字化管理平台

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",
  }
])