<template>
<a-table :columns="columns" :data-source="data" class="components-table-demo-nested">
<template #operation>
<a>Publish</a>
</template>
<template #expandedRowRender>
<a-table :columns="innerColumns" :data-source="innerData" :pagination="false">
<template #status>
<span>
<a-badge status="success" />
Finished
</span>
</template>
<template #operation>
<span class="table-operation">
<a>Pause</a>
<a>Stop</a>
<a-dropdown>
<template #overlay>
<a-menu>
<a-menu-item>Action 1</a-menu-item>
<a-menu-item>Action 2</a-menu-item>
</a-menu>
</template>
<a>
More
<down-outlined />
</a>
</a-dropdown>
</span>
</template>
</a-table>
</template>
</a-table>
</template>
<script>
import {DownOutlined} from '@ant-design/icons-vue';
import {defineComponent} from 'vue';
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Platform',
dataIndex: 'platform',
key: 'platform',
},
{
title: 'Version',
dataIndex: 'version',
key: 'version',
},
{
title: 'Upgraded',
dataIndex: 'upgradeNum',
key: 'upgradeNum',
},
{
title: 'Creator',
dataIndex: 'creator',
key: 'creator',
},
{
title: 'Date',
dataIndex: 'createdAt',
key: 'createdAt',
},
{
title: 'Action',
key: 'operation',
slots: {customRender: 'operation',},
},
];
const data = [];
for (let i = 0; i < 3; ++i) {
data.push({
key: i,
name: 'Screem',
platform: 'iOS',
version: '10.3.4.5654',
upgradeNum: 500,
creator: 'Jack',
createdAt: '2014-12-24 23:12:00',
});
}
const innerColumns = [
{
title: 'Date',
dataIndex: 'date',
key: 'date',
},
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Status',
key: 'state',
slots: {customRender: 'status',},
},
{
title: 'Upgrade Status',
dataIndex: 'upgradeNum',
key: 'upgradeNum',
},
{
title: 'Action',
dataIndex: 'operation',
key: 'operation',
slots: {customRender: 'operation',},
},
];
const innerData = [];
for (let i = 0; i < 3; ++i) {
innerData.push({
key: i,
date: '2014-12-24 23:12:00',
name: 'This is production name',
upgradeNum: 'Upgraded: 56',
});
}
export default defineComponent({
components: {DownOutlined,},
setup() {
return {
data,
columns,
innerColumns,
innerData,
};
},
});
</script>
很简略,定义列的时候,就定义好,而后加上 customRender
而后在 template 外面具体定义