为什么在Ant Design Vue3的表格中使用插槽无法在页面上显示插槽中的内容。

Question

html结构

 <a-table :columns="columns" :data-source="userTableList" rowKey="id" bordered>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'mg_state'">
            <a-switch checked-children="启用" un-checked-children="禁用" />
          </template>
        </template>
      </a-table>

表头的数据

const columns: Colums[] = [
  {
    title: "角色名称",
    dataIndex: "username",
    key: "username"
  },
  {
    title: "角色职位",
    dataIndex: "role_name",
    key: 'role_name'
  },
  {
    title: "状态",
    dataIndex: "mg_state",
    key: 'mg_state'
  },
  {
    title: "创建时间",
    dataIndex: "create_time",
    key: "create_time"
  },
  {
    title: "邮箱",
    dataIndex: "email",
    key: "email"
  },
  {
    title: "手机",
    dataIndex: "mobile",
    key: "mobile"
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation"
  }
]

Answer 1

我刚刚在重新编写我之前的一个前端项目的时候也遇到了这个问题，后来我发现，之前的项目的antdv版本是2.x，升级到最新的3.x之后，这个问题解决了。虽然我升级之后并没有发现什么其它的问题，但如果项目很重要，请谨慎升级，网上也有使用Vue3搭配antdv2的表格解决方案，可以去找下。

看起来应该是antdv2并不支持vue3中新的插槽语法。