浏览器方式引入antd文件，表格的自定义单元格bodyCell插槽无效

[zyufstudio]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.2.20

Environment

vue3

Reproduction link

https://raw.githubusercontent.com/zyufstudio/antd3-test/master/index.html

Steps to reproduce

<title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@3.4.21/dist/vue.global.prod.js"></script> <script src="https://unpkg.com/dayjs/dayjs.min.js"></script> <script src="https://unpkg.com/dayjs/plugin/customParseFormat.js"></script> <script src="https://unpkg.com/dayjs/plugin/weekday.js"></script> <script src="https://unpkg.com/dayjs/plugin/localeData.js"></script> <script src="https://unpkg.com/dayjs/plugin/weekOfYear.js"></script> <script src="https://unpkg.com/dayjs/plugin/weekYear.js"></script> <script src="https://unpkg.com/dayjs/plugin/advancedFormat.js"></script> <script src="https://unpkg.com/dayjs/plugin/quarterOfYear.js"></script> <script src="https://unpkg.com/ant-design-vue@3.2.20/dist/antd.min.js"></script>

{{ text }}

<script> const { createApp, ref, toRaw, watch } = Vue const main = { setup() { const columns = ref([ { title: 'Name', dataIndex: 'name', key: 'name', //slots: { customRender: 'name' }, }, { title: 'Age', dataIndex: 'age', key: 'age', width: 80, }, { title: 'Address', dataIndex: 'address', key: 'address 1', ellipsis: true, }, { title: 'Long Column Long Column Long Column', dataIndex: 'address', key: 'address 2', ellipsis: true, }, { title: 'Long Column Long Column', dataIndex: 'address', key: 'address 3', ellipsis: true, }, { title: 'Long Column', dataIndex: 'address', key: 'address 4', ellipsis: true, }, ]); const data = ref([ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park, New York No. 1 Lake Park', tags: ['nice', 'developer'], }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 2 Lake Park, London No. 2 Lake Park', tags: ['loser'], }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park', tags: ['cool', 'teacher'], }, ]) return { data,columns }; } } const app = createApp(main).use(antd).mount('#app') </script>

运行页面后，bodyCell插槽自定义单元格无效

What is expected?

bodyCell插槽可以正常自定义单元格

What is actually happening?

bodyCell插槽无效

[Sight-wcg]

这是 Vue 在 DOM 内嵌模板中的语法限制，暂时可以用动态插槽来解决。

<template #[body_cell]="{column, text }">
    <template v-if="column.dataIndex === 'name'">
      <a>name {{ text }}</a>
    </template>
</template>

setup(){
  return {
    body_cell: 'bodyCell'
  }
}

[github-actions]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days