1：#name="{ text }"是v-slot:name="{text}"的简写,name是插槽名称，text是子组件提供的数据(运用了插槽作用域传值)，{text:xxyy}还可以这样写,这样下面就要改成<a>{{ xxyy}}</a>了
注意:(#name="{text}"是子组件提供的当前行的当前列的数据，#name="{record}"是子组件提供的当前行的数据 )
<template #name="{ text }">
<a>{{ text }}</a>
</template>
2：title，customRender在<a-table>内部的分析：
title: 'customTitle'，当调用<a-table>的时候，<a-table>会根据title是否有值在name列的表头创建名字为customTitle的插槽,供父组件传递对应的该列的表头结构
customRender: 'name',当调用<a-table>的时候，<a-table>会根据customRender是否有值在name列的每一个td里面创建一个名字为name的插槽，并且根据插槽作用域
提供一个text(当前列的值)，record(当前行的对象)给父组件,父组件拿到后根据text或者record传入对应结构做渲染
slots{
title: 'customTitle',
customRender: 'name',
}
3：定义数据列，呢里的dataIndex必须和3里面的数据行的列名对应上,
{
dataIndex: 'name',
width: 40,
align: 'left',
ellipsis: true ,
slots: {
title: 'customTitle',
customRender: 'name',
},
},
4：返回的数据行
{
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
tags: ['nice', 'developer'],
},
4：以下是完整代码示例:
<template>
<a-table :columns="columns" :data-source="data" :pagination="false">
<template #name="{ text }">
<a>{{ text }}</a>
</template>
<template #customTitle>
<span>
<smile-outlined />
Name1
</span>
</template>
<template #tagsy="{ text:xxyy}">
<span>
<a-tag
v-for="tag in xxyy"
:key="tag"
:color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
>
{{ tag.toUpperCase() }}
</a-tag>
</span>
</template>
<template #action="{ record }">
<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>
</a-table>
</template>
<script>
import { SmileOutlined,DownOutlined } from '@ant-design/icons-vue';
const columns = [
{
dataIndex: 'name',
width: 40,
align: 'left',
ellipsis: true ,
slots: {
title: 'customTitle',
customRender: 'name',
},
},
{
title: 'Age',
dataIndex: 'age',
width: 40,
align: 'left',
ellipsis: true ,
slots: {customRender: 'age'}
},
{
title: 'Address',
dataIndex: 'address',
width: 80,
align: 'left',
ellipsis: true ,
},
{
title: 'tags',
dataIndex: 'tags',
width: 80,
align: 'left',
ellipsis: true ,
slots: {
customRender: 'tagsy',
},
},
{
title: 'Action',
key: 'action',
width: 80,
align: 'left',
ellipsis: true ,
slots: {
customRender: 'action',
},
},
];
const data = [
{
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
tags: ['nice', 'developer'],
},
{
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
tags: ['loser'],
},
{
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
tags: ['cool', 'teacher'],
},
];
export default({
name:"WW",
setup() {
return {
data,
columns,
};
},
components: {
SmileOutlined,
DownOutlined
},
});
</script>