当前位置：首页 > VUE

vue实现树形框

2026-02-18 09:21:07VUE

Vue 实现树形框的方法

在 Vue 中实现树形框可以通过多种方式完成，以下是几种常见的方法：

使用第三方组件库

许多流行的 Vue UI 组件库提供了现成的树形组件，例如 Element UI、Ant Design Vue 等。以 Element UI 为例：

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

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

自定义递归组件

如果需要完全自定义树形结构，可以创建一个递归组件：

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

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

使用 vue-tree-list 插件

vue-tree-list 是一个专门用于树形结构的 Vue 组件：

npm install vue-tree-list --save

<template>
  <vue-tree-list
    :model="treeData"
    default-tree-node-name="new node"
    default-leaf-node-name="new leaf"
    v-on:click="onClick"
  />
</template>

<script>
import { VueTreeList, Tree, TreeNode } from 'vue-tree-list'
export default {
  components: {
    VueTreeList
  },
  data() {
    return {
      treeData: new Tree([
        {
          name: 'Node 1',
          children: [
            {
              name: 'Node 1.1'
            }
          ]
        }
      ])
    }
  },
  methods: {
    onClick(node) {
      console.log(node)
    }
  }
}
</script>

实现拖拽功能

如果需要实现拖拽排序功能，可以使用 vue-draggable-nested-tree：

npm install vue-draggable-nested-tree

<template>
  <draggable-nested-tree
    :tree="treeData"
    @change="onTreeChange"
  />
</template>

<script>
import DraggableNestedTree from 'vue-draggable-nested-tree'
export default {
  components: { DraggableNestedTree },
  data() {
    return {
      treeData: [
        {
          text: 'Node 1',
          children: [
            { text: 'Node 1.1' }
          ]
        }
      ]
    }
  },
  methods: {
    onTreeChange(tree) {
      this.treeData = tree
    }
  }
}
</script>