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>

性能优化建议

1. 为每个节点添加唯一key标识
2. 大数据量时考虑虚拟滚动方案
3. 复杂操作可使用Vuex管理状态
4. 添加节点时考虑防抖处理频繁操作

完整组件示例

export default {
  name: 'TreeComponent',
  props: ['treeData'],
  methods: {
    // 前面列出的所有方法
  }
}

注意事项

1. 删除操作需要确认节点是否为空
2. 添加节点时应生成唯一ID
3. 深层嵌套时考虑使用非递归算法
4. 可结合provide/inject跨层级传递方法