ant-design-vue 表格三层可展开
时间: 2023-11-12 18:09:49 浏览: 41
Ant Design Vue 表格支持三层可展开,可以通过 `expandable` 属性来设置。具体实现步骤如下:
1. 在表格数据源中添加 `children` 字段来存储子节点数据。
2. 在表格列中添加 `expandable` 属性,用于设置展开行的相关配置,包括展开图标、收起图标、是否默认展开等。
3. 使用 `scoped slot` 来自定义展开行的内容。
下面是一个示例代码:
```vue
<template>
<a-table :columns="columns" :data-source="dataSource" :expandable="expandable">
<template #expanded-row="{record}">
<a-table :columns="subColumns" :data-source="record.children" row-key="id"></a-table>
</template>
</a-table>
</template>
<script>
export default {
data() {
return {
dataSource: [
{
id: 1,
name: 'parent1',
children: [
{
id: 11,
name: 'child1'
},
{
id: 12,
name: 'child2'
}
]
},
{
id: 2,
name: 'parent2',
children: [
{
id: 21,
name: 'child3',
children: [
{
id: 211,
name: 'grandchild1'
}
]
}
]
}
],
columns: [
{
title: 'ID',
dataIndex: 'id'
},
{
title: 'Name',
dataIndex: 'name'
}
],
subColumns: [
{
title: 'ID',
dataIndex: 'id'
},
{
title: 'Name',
dataIndex: 'name'
}
],
expandable: {
expandIcon: ({ expanded, onExpand, record }) => {
if (!record.children) {
return null
}
if (expanded) {
return <a-icon type="minus-square" onClick={e => onExpand(record, e)} />
} else {
return <a-icon type="plus-square" onClick={e => onExpand(record, e)} />
}
},
rowExpandable: record => !!record.children,
defaultExpandAllRows: true
}
}
}
}
</script>
```
在上面的示例代码中,我们定义了一个表格,其中包含两个父节点和三个子节点。每个父节点下面都有若干个子节点,而某些子节点下面还有更深层的子节点。
我们使用了嵌套表格的方式来展示三层数据,使用了 `scoped slot` 来自定义展开行的内容。同时,我们也设置了展开行的相关配置,包括展开图标、收起图标、是否默认展开等。