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>