vue实现嵌套树

Vue 实现嵌套树的方法

使用递归组件实现嵌套树

递归组件是 Vue 中实现嵌套树的常见方法。通过组件调用自身，可以动态渲染任意层级的树结构。

<template>
  <ul>
    <li v-for="item in treeData" :key="item.id">
      {{ item.name }}
      <tree-node v-if="item.children && item.children.length" :treeData="item.children"/>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    treeData: {
      type: Array,
      required: true
    }
  }
}
</script>

使用时传入树形结构数据：

<template>
  <tree-node :treeData="treeData"/>
</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' }
          ]
        }
      ]
    }
  }
}
</script>

使用第三方库 vue-tree-halower

对于更复杂的需求，可以使用专门处理树形结构的第三方库。

安装：

npm install vue-tree-halower

基本用法：

<template>
  <tree
    :data="treeData"
    :options="treeOptions"
    @node:selected="onNodeSelected"
  />
</template>

<script>
import { Tree } from 'vue-tree-halower'

export default {
  components: { Tree },
  data() {
    return {
      treeData: [
        {
          text: '根节点',
          children: [
            { text: '子节点1' },
            { text: '子节点2' }
          ]
        }
      ],
      treeOptions: {
        checkboxes: true
      }
    }
  },
  methods: {
    onNodeSelected(node) {
      console.log('选中节点:', node)
    }
  }
}
</script>

使用 Element UI 的 Tree 组件

如果项目使用 Element UI，可以直接使用其 Tree 组件。

安装 Element UI：

npm install element-ui

示例代码：

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    @node-click="handleNodeClick"
  />
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          label: '一级节点',
          children: [
            { label: '二级节点' }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    }
  }
}
</script>

实现可折叠的嵌套树

通过控制节点的展开状态，可以实现可折叠的树结构。

<template>
  <ul>
    <li v-for="item in treeData" :key="item.id">
      <div @click="toggleExpand(item)">
        <span>{{ item.expanded ? '▼' : '▶' }}</span>
        {{ item.name }}
      </div>
      <tree-node 
        v-if="item.children && item.children.length && item.expanded"
        :treeData="item.children"
      />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    treeData: Array
  },
  methods: {
    toggleExpand(item) {
      this.$set(item, 'expanded', !item.expanded)
    }
  }
}
</script>

使用插槽自定义节点内容

Vue 的插槽功能允许自定义每个节点的渲染内容。

<template>
  <ul>
    <li v-for="item in treeData" :key="item.id">
      <slot name="node" :item="item">
        {{ item.name }}
      </slot>
      <tree-node 
        v-if="item.children && item.children.length"
        :treeData="item.children"
      >
        <template v-slot:node="{ item }">
          <b>{{ item.name }}</b>
        </template>
      </tree-node>
    </li>
  </ul>
</template>

性能优化技巧

对于大型树结构，可以使用虚拟滚动技术优化性能。

<template>
  <virtual-list :size="30" :remain="10">
    <tree-node 
      v-for="item in treeData" 
      :key="item.id" 
      :treeData="[item]"
    />
  </virtual-list>
</template>

树形结构数据格式

标准树形结构数据通常采用以下格式：

[
  {
    id: 1,
    name: '节点1',
    children: [
      {
        id: 2,
        name: '子节点1',
        children: []
      }
    ]
  }
]

处理异步加载的子节点

当子节点需要异步加载时，可以使用以下模式：

methods: {
  loadChildren(node) {
    return api.getChildren(node.id).then(children => {
      this.$set(node, 'children', children)
    })
  }
}

树节点的拖拽功能

实现拖拽功能需要处理拖拽事件：

onDragStart(node) {
  this.draggedNode = node
},
onDrop(targetNode) {
  // 移动draggedNode到targetNode下
}