vue实现树形表格
Vue 实现树形表格的方法
使用递归组件实现树形结构
递归组件是Vue中实现树形结构的常用方式。通过组件调用自身，可以轻松渲染嵌套的树形数据。
<template>
<table>
<thead>
<tr>
<th>名称</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tree-node
v-for="node in treeData"
:key="node.id"
:node="node"
@toggle="toggleExpand"
/>
</tbody>
</table>
</template>
<script>
import TreeNode from './TreeNode.vue'
export default {
components: { TreeNode },
data() {
return {
treeData: [
{
id: 1,
name: '父节点1',
children: [
{ id: 2, name: '子节点1' },
{ id: 3, name: '子节点2' }
]
}
]
}
},
methods: {
toggleExpand(node) {
this.$set(node, 'expanded', !node.expanded)
}
}
}
</script>TreeNode组件实现：
<template>
<tr>
<td>
<span @click="toggle" style="cursor: pointer">
{{ node.expanded ? '▼' : '▶' }} {{ node.name }}
</span>
</td>
<td>
<button @click="$emit('edit', node)">编辑</button>
</td>
</tr>
<template v-if="node.expanded && node.children">
<tree-node
v-for="child in node.children"
:key="child.id"
:node="child"
@toggle="toggleExpand"
/>
</template>
</template>
<script>
export default {
name: 'TreeNode',
props: ['node'],
methods: {
toggle() {
this.$emit('toggle', this.node)
}
}
}
</script>使用第三方库
对于更复杂的需求，可以使用成熟的第三方库如：
- vue-table-with-tree-grid：专门为Vue设计的树形表格组件
- element-ui的el-table：通过设置
tree-props属性支持树形结构 - vuetify的v-data-table：通过自定义插槽实现树形结构
以element-ui为例：
<el-table
:data="tableData"
row-key="id"
border
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="date" label="日期"></el-table-column>
</el-table>性能优化技巧
- 对于大型数据集，使用虚拟滚动技术避免渲染所有节点
- 实现懒加载，只在展开时加载子节点数据
- 使用
v-show替代v-if保持DOM状态 - 为每个节点添加唯一key提高diff效率
样式自定义
通过CSS可以增强树形表格的视觉效果：
.tree-node {
padding-left: 20px;
position: relative;
}
.tree-node:before {
content: "";
position: absolute;
left: 0;
top: 50%;
border-top: 1px solid #ccc;
width: 15px;
}
.tree-node:after {
content: "";
position: absolute;
left: 0;
height: 100%;
border-left: 1px solid #ccc;
}功能扩展
- 添加复选框实现多级选择
- 实现拖拽排序功能
- 添加搜索过滤功能
- 支持异步加载子节点数据
- 实现节点增删改查操作
以上方法提供了Vue中实现树形表格的不同方案，可以根据项目需求选择合适的实现方式。
