当前位置：首页 > VUE

vue实现树型组件

2026-01-21 12:53:02VUE

vue实现树型组件的方法

递归组件实现

使用Vue的递归组件特性可以轻松实现树形结构。定义一个组件，在组件内部调用自身。

<template>
  <ul>
    <li v-for="node in nodes" :key="node.id">
      {{ node.name }}
      <tree-component v-if="node.children" :nodes="node.children"/>
    </li>
  </ul>
</template>

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

动态组件加载

对于大型树结构，可以采用动态加载方式优化性能。

<template>
  <div>
    <div v-for="node in visibleNodes" :key="node.id">
      <span @click="toggleNode(node)">{{ node.expanded ? '-' : '+' }}</span>
      {{ node.name }}
      <tree-node 
        v-if="node.expanded && node.children" 
        :nodes="node.children"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: ['nodes'],
  data() {
    return {
      visibleNodes: this.nodes.map(node => ({
        ...node,
        expanded: false
      }))
    }
  },
  methods: {
    toggleNode(node) {
      node.expanded = !node.expanded
    }
  }
}
</script>

使用第三方库

Vue生态中有成熟的树形组件库可供选择：

vue-tree-list：功能丰富的树形组件
vue-draggable-nested-tree：支持拖拽的树形组件
element-ui的el-tree：企业级UI库中的树组件

安装示例：

npm install vue-tree-list

使用示例：

<template>
  <vue-tree-list 
    :model="treeData" 
    @click="onClick"
  />
</template>

<script>
import { VueTreeList } from 'vue-tree-list'

export default {
  components: {
    VueTreeList
  },
  data() {
    return {
      treeData: {
        name: 'Root',
        children: [
          { name: 'Child 1' },
          { name: 'Child 2' }
        ]
      }
    }
  },
  methods: {
    onClick(node) {
      console.log(node)
    }
  }
}
</script>

性能优化技巧

对于大型树结构，采用虚拟滚动技术防止DOM节点过多导致的性能问题。

<template>
  <virtual-list 
    :size="40"
    :remain="20"
    :data="flattenedTree"
  >
    <div 
      v-for="item in flattenedTree" 
      :key="item.id"
      :style="{ paddingLeft: `${item.level * 20}px` }"
    >
      {{ item.name }}
    </div>
  </virtual-list>
</template>

<script>
import VirtualList from 'vue-virtual-scroll-list'

export default {
  components: {
    VirtualList
  },
  computed: {
    flattenedTree() {
      // 将树形结构扁平化处理
      return this.flattenNodes(this.treeData)
    }
  },
  methods: {
    flattenNodes(nodes, level = 0, result = []) {
      nodes.forEach(node => {
        result.push({ ...node, level })
        if (node.children) {
          this.flattenNodes(node.children, level + 1, result)
        }
      })
      return result
    }
  }
}
</script>

功能扩展实现

为树组件添加常见功能如复选框、拖拽、搜索等。

<template>
  <div>
    <input v-model="searchText" placeholder="搜索...">
    <ul>
      <tree-node 
        v-for="node in filteredNodes"
        :key="node.id"
        :node="node"
        @toggle="toggleNode"
        @select="selectNode"
      />
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      nodes: [
        {
          id: 1,
          name: 'Node 1',
          children: [
            { id: 2, name: 'Child 1' }
          ]
        }
      ]
    }
  },
  computed: {
    filteredNodes() {
      if (!this.searchText) return this.nodes
      return this.filterNodes(this.nodes, this.searchText.toLowerCase())
    }
  },
  methods: {
    filterNodes(nodes, searchText) {
      return nodes.filter(node => {
        const matches = node.name.toLowerCase().includes(searchText)
        if (node.children) {
          const filteredChildren = this.filterNodes(node.children, searchText)
          return matches || filteredChildren.length > 0
        }
        return matches
      })
    },
    toggleNode(node) {
      node.expanded = !node.expanded
    },
    selectNode(node) {
      this.$emit('node-selected', node)
    }
  }
}
</script>

vue实现树型组件