共计 1913 个字符,预计需要花费 5 分钟才能阅读完成。
<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 外面具体定义
正文完