当前位置：首页 > VUE

vue实现treeview

2026-01-13 01:51:27VUE

Vue 实现 TreeView 组件

递归组件实现基础树形结构

使用 Vue 的递归组件特性可以轻松实现树形结构。定义一个组件，该组件能够调用自身来渲染子节点。

<template>
  <ul>
    <li v-for="node in treeData" :key="node.id">
      {{ node.label }}
      <tree-view v-if="node.children" :treeData="node.children"/>
    </li>
  </ul>
</template>

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

添加展开/折叠功能

通过添加一个 isOpen 属性来控制节点的展开和折叠状态。

<template>
  <ul>
    <li v-for="node in treeData" :key="node.id">
      <span @click="toggle(node)">{{ node.isOpen ? '▼' : '►' }} {{ node.label }}</span>
      <tree-view v-if="node.children && node.isOpen" :treeData="node.children"/>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeView',
  props: {
    treeData: {
      type: Array,
      required: true
    }
  },
  methods: {
    toggle(node) {
      node.isOpen = !node.isOpen
    }
  }
}
</script>

动态加载子节点

对于大型树结构，可以动态加载子节点以提高性能。

<template>
  <ul>
    <li v-for="node in treeData" :key="node.id">
      <span @click="loadChildren(node)">
        {{ node.hasChildren ? (node.isOpen ? '▼' : '►') : '' }} {{ node.label }}
      </span>
      <tree-view v-if="node.children && node.isOpen" :treeData="node.children"/>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeView',
  props: {
    treeData: {
      type: Array,
      required: true
    }
  },
  methods: {
    loadChildren(node) {
      if (!node.children && node.hasChildren) {
        // 模拟异步加载
        setTimeout(() => {
          node.children = [
            { id: `${node.id}-1`, label: 'Child 1', hasChildren: false },
            { id: `${node.id}-2`, label: 'Child 2', hasChildren: false }
          ]
          node.isOpen = true
        }, 500)
      } else {
        node.isOpen = !node.isOpen
      }
    }
  }
}
</script>

添加复选框支持

在树形结构中添加复选框，允许选择单个或多个节点。

<template>
  <ul>
    <li v-for="node in treeData" :key="node.id">
      <input type="checkbox" v-model="node.checked" @change="handleCheck(node)">
      <span @click="toggle(node)">{{ node.isOpen ? '▼' : '►' }} {{ node.label }}</span>
      <tree-view v-if="node.children && node.isOpen" :treeData="node.children"/>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeView',
  props: {
    treeData: {
      type: Array,
      required: true
    }
  },
  methods: {
    toggle(node) {
      node.isOpen = !node.isOpen
    },
    handleCheck(node) {
      this.updateChildren(node, node.checked)
      this.updateParent(node)
    },
    updateChildren(node, checked) {
      if (node.children) {
        node.children.forEach(child => {
          child.checked = checked
          this.updateChildren(child, checked)
        })
      }
    },
    updateParent(node) {
      // 实现父节点根据子节点状态更新
    }
  }
}
</script>

使用第三方库

如果需要更复杂的功能，可以考虑使用第三方库如 vue-jstree 或 element-ui 的树形组件。

安装 element-ui：

npm install element-ui

使用示例：

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

<script>
import { ElTree } from 'element-ui'

export default {
  components: {
    ElTree
  },
  data() {
    return {
      treeData: [{
        label: 'Node 1',
        children: [{
          label: 'Node 1-1'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    }
  }
}
</script>

样式优化

为树形结构添加基本样式，使其更美观。

ul {
  list-style-type: none;
  padding-left: 20px;
}

li {
  margin: 5px 0;
  cursor: pointer;
}

span {
  padding: 2px 5px;
}

span:hover {
  background-color: #f0f0f0;
}

以上方法提供了从基础到高级的 Vue TreeView 实现方案，可以根据需求选择适合的方式。

vue实现treeview