When using a table table, according to the usage of official documents, you cannot use template vif to personalize cells #5382
Description
- I have searched the issues of this repository and believe that this is not a duplicate.
Version
3.1.0-rc.2
Environment
操作系统：win11，浏览器：chrome 98.0.4758.82，vue3.2.25，ant3.1.0-rc2
Reproduction link
Steps to reproduce
<template>
<a-table :columns="columns" :data-source="data">
<template #headerCell="{ column }">
<template v-if="column.key === 'name'">
<span>
<smile-outlined />Name
</span>
</template>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'name'">
<a>{{ record.name }}</a>
</template>
<template v-else-if="column.key === 'tags'">
<span>
<a-tag
v-for="tag in record.tags"
:key="tag"
:color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
>{{ tag.toUpperCase() }}</a-tag>
</span>
</template>
<template v-else-if="column.key === 'action'">
<span>
<a>Invite 一 {{ record.name }}</a>
<a-divider type="vertical" />
<a>Delete</a>
<a-divider type="vertical" />
<a class="ant-dropdown-link">
More actions
<down-outlined />
</a>
</span>
</template>
</template>
</a-table>
</template><script lang="ts">
import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue';
import { defineComponent } from 'vue';
const columns = [
{
name: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
{
title: 'Tags',
key: 'tags',
dataIndex: 'tags',
},
{
title: 'Action',
key: 'action',
},
];
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
tags: ['nice', 'developer'],
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
tags: ['loser'],
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
tags: ['cool', 'teacher'],
},
];
export default defineComponent({
components: {
SmileOutlined,
DownOutlined,
},
setup() {
return {
data,
columns,
};
},
});
</script>What is expected?
渲染出官方文档中表格组件中的基本使用的案例。
What is actually happening?
并不能通过v-if来渲染出来个性化的单元格。
不知道是文档没有更新还是我的vue版本太新了，使用官方文档中的用法并不能成功渲染出案例，但是我在表头数据中定义好 slots: { customRender: "mg_state" }，然后在模板中使用template #mg_state就可以渲染出个性化单元格
const columns: Colums[] = [
{
title: "状态",
dataIndex: "mg_state",
key: 'mg_state',
slots: { customRender: "mg_state" },
align: "center",
width: 100
}
]<template #mg_state="{ record }">
<a-switch
@click="changeUserState(record.id, record.mg_state)"
checked-children="启用"
un-checked-children="禁用"
:checked="record.mg_state"
/>
</template>