### 使用 Ant Design Vue 实现 Tree Data
表格并合并单元格
在 Ant Design Vue 中，`a-
table` 组件支持展示树状结构的数据，并允许通过自定义渲染函数来实现复杂的
表格布局，包括合并单元格。为了达到这一目的，可以利用 `rowClassName` 和 `customRow` 属性以及列配置中的 `colSpan` 方法。
对于树形数据的支持，可以通过设置 `treeData` 或者使用 `children` 字段
嵌套子项的方式来构建层次化的数据集[^1]。当处理需要合并的单元格时，逻辑上要遍历整个数据集合，在适当的位置调整 `colSpan` 和 `rowSpan` 值以控制显示效果[^2]。
下面是一个简单的例子，展示了如何创建带有树形结构并且能够合并相同内容单元格的
表格：
```vue
<template>
<a-
table :columns="columns" :data-source="dataSource" :expanded-row-keys.sync="expandedRowKeys">
<!-- 自定义列模板用于判断是否应该跨越多行 -->
<span slot="name" slot-scope="text, record">{{ text }}</span>
</a-
table>
</template>
<script>
export default {
data() {
return {
expandedRowKeys: [],
columns: [
{ title: 'Name', dataIndex: 'name', key: 'name', scopedSlots: { customRender: 'name' } },
{ title: 'Age', dataIndex: 'age', key: 'age' },
{ title: 'Address', dataIndex: 'address', key: 'address' }
],
dataSource: []
};
},
methods: {
// 计算每一行的实际跨行数
getRowSpan(data, index) {
let span = 0;
const currentKey = `${data[index].key}`;
while (index >= 0 && this.dataSource[index]?.key === currentKey) {
++span;
--index;
}
return span;
},
prepareDataSource(treeData) {
function flattenTree(
list, parent = null, level = 0) {
return
list.reduce((acc, item, idx) => {
acc.push({
...item,
parentId: parent ? parent.key : '',
children: undefined,
_level: level
});
if (Array.isArray(item.children)) {
acc.push(...flattenTree(item.children, item, level + 1));
}
return acc;
}, []);
}
const flat
List = flattenTree(treeData);
const result = [];
for (let i = 0; i < flat
List.length; i++) {
const row = flat
List[i];
Object.keys(row).forEach(key => {
if (!result.some(r => r.key === row[key])) {
result.push({ ...row });
['name'].forEach(col => {
if (i > 0 && col in row) {
const prevIndex = i - 1;
if (flat
List[prevIndex][col] === row[col]) {
result[result.length - 1][`${col}ColSpan`] = 0;
if (!(`${col}RowSpan` in result.find(r => r[col] === row[col]))) {
result.find(r => r[col] === row[col])[`${col}RowSpan`] = this.getRowSpan(flat
List.map(d => d[col]), prevIndex);
}
}
}
});
}
});
this.dataSource = result.filter(r => !r.hidden);
}
}
},
mounted() {
// 初始化 tree 数据源
const treeData = [
{
name: "Parent 1",
age: 32,
address: "New York No. 1 Lake Park",
key: "1",
children: [
{
name: "Child 1-1",
age: 32,
address: "New York No. 2 Lake Park",
key: "1-1"
},
{
name: "Child 1-2",
age: 32,
address: "New York No. 3 Lake Park",
key: "1-2"
}
]
},
{
name: "Parent 2",
age: 42,
address: "London No. 1 Lake Park",
key: "2"
}
];
this.prepareDataSource(treeData);
}
};
</script>
```
此代码片段实现了基于给定树形数据生成扁平化列表的功能，并在此过程中计算哪些单元格应当被合并及其对应的行列跨度值。注意这里简化了一些细节以便更好地理解核心概念；实际应用中可能还需要考虑更多边界情况和性能优化措施。
最低0.47元/天 解锁文章
扫一扫
1117
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
