vue实现树增加删除
Vue实现树形结构的增删功能
核心思路
通过递归组件实现树形结构渲染，结合Vue响应式特性管理数据增删操作。关键点在于维护扁平化的树形数据，并通过v-for递归渲染子节点。
基础数据结构示例
data() {
return {
treeData: [
{
id: 1,
label: '父节点',
children: [
{
id: 2,
label: '子节点1',
children: []
}
]
}
]
}
}实现节点删除功能
方法一：通过ID定位删除
methods: {
deleteNode(tree, targetId) {
for (let i = 0; i < tree.length; i++) {
if (tree[i].id === targetId) {
tree.splice(i, 1)
return true
}
if (tree[i].children && tree[i].children.length > 0) {
const found = this.deleteNode(tree[i].children, targetId)
if (found) return true
}
}
return false
}
}方法二：通过引用直接删除
deleteNode(parentArray, index) {
parentArray.splice(index, 1)
}实现节点添加功能
添加子节点
addChildNode(parentNode) {
if (!parentNode.children) {
this.$set(parentNode, 'children', [])
}
parentNode.children.push({
id: Date.now(),
label: '新节点',
children: []
})
}添加同级节点
addSiblingNode(parentArray, index) {
parentArray.splice(index + 1, 0, {
id: Date.now(),
label: '新节点',
children: []
})
}递归组件实现
树形组件模板
<template>
<ul>
<li v-for="(node, index) in treeData" :key="node.id">
{{ node.label }}
<button @click="deleteNode(treeData, index)">删除</button>
<button @click="addChildNode(node)">添加子节点</button>
<button @click="addSiblingNode(treeData, index)">添加同级节点</button>
<tree-component
v-if="node.children && node.children.length"
:tree-data="node.children">
</tree-component>
</li>
</ul>
</template>性能优化建议
- 为每个节点添加唯一
key标识 - 大数据量时考虑虚拟滚动方案
- 复杂操作可使用Vuex管理状态
- 添加节点时考虑防抖处理频繁操作
完整组件示例
export default {
name: 'TreeComponent',
props: ['treeData'],
methods: {
// 前面列出的所有方法
}
}注意事项
- 删除操作需要确认节点是否为空
- 添加节点时应生成唯一ID
- 深层嵌套时考虑使用非递归算法
- 可结合
provide/inject跨层级传递方法
