vue树状表格简单实现
实现树状表格的基本思路
在Vue中实现树状表格通常需要以下核心功能：递归渲染子节点、展开/折叠控制、数据层级处理。以下是一个基于Element UI的简单实现方案。
安装Element UI（如未安装）
npm install element-ui基础组件结构
<template>
<el-table :data="flattenData" row-key="id" border>
<el-table-column prop="name" label="名称">
<template #default="{ row }">
<span :style="{ paddingLeft: (row.level * 18) + 'px' }">
<span v-if="row.children && row.children.length" @click="toggleExpand(row)">
{{ row.expanded ? '▼' : '►' }}
</span>
{{ row.name }}
</span>
</template>
</el-table-column>
<el-table-column prop="value" label="值" />
</el-table>
</template>数据处理方法
export default {
data() {
return {
treeData: [
{
id: 1,
name: '父节点1',
value: '值1',
children: [
{ id: 2, name: '子节点1-1', value: '值1-1' },
{ id: 3, name: '子节点1-2', value: '值1-2' }
]
},
{
id: 4,
name: '父节点2',
value: '值2',
children: [
{
id: 5,
name: '子节点2-1',
value: '值2-1',
children: [
{ id: 6, name: '孙节点2-1-1', value: '值2-1-1' }
]
}
]
}
],
flattenData: []
}
},
methods: {
flattenTree(data, level = 0, parentExpanded = true) {
let result = [];
data.forEach(item => {
const newNode = {
...item,
level,
expanded: false,
visible: parentExpanded
};
result.push(newNode);
if (item.children && item.children.length) {
result = result.concat(
this.flattenTree(item.children, level + 1, newNode.expanded && newNode.visible)
);
}
});
return result;
},
toggleExpand(row) {
row.expanded = !row.expanded;
this.updateFlattenData();
},
updateFlattenData() {
this.flattenData = this.flattenTree(this.treeData);
}
},
created() {
this.updateFlattenData();
}
}样式优化
.el-table .cell {
white-space: nowrap;
}
span[style*="padding-left"] {
cursor: pointer;
user-select: none;
}实现说明
- 数据结构：使用包含
children属性的嵌套结构表示树形数据 - 扁平化处理：将树形数据转换为扁平数组以便表格渲染，同时添加
level和expanded状态 - 展开控制：通过点击图标切换
expanded状态，动态更新可见数据 - 缩进显示：根据
level属性设置左padding实现视觉层级
进阶优化方向
- 添加懒加载功能
- 实现复选框全选/半选状态
- 增加拖拽排序支持
- 添加搜索过滤功能
通过以上方法即可实现基本的树状表格功能，可根据实际需求调整数据结构和交互细节。
