当前位置：首页 > VUE

vue实现树状结构

2026-03-29 11:07:42VUE

Vue实现树状结构

在Vue中实现树状结构（树形菜单）是一个常见的需求，下面我将介绍如何使用Vue来实现一个基本的树状结构。

基本实现方法

1. 使用递归组件

<template>
  <div>
    <ul>
      <tree-node
        v-for="node in treeData"
        :key="node.id"
        :node="node"
      />
    </ul>
  </div>
</template>

<script>
import TreeNode from './TreeNode.vue'

export default {
  components: {
    TreeNode
  },
  data() {
    return {
      treeData: [
        {
          id: 1,
          name: '节点1',
          children: [
            {
              id: 2,
              name: '节点1-1',
              children: []
            },
            {
              id: 3,
              name: '节点1-2',
              children: [
                {
                  id: 4,
                  name: '节点1-2-1',
                  children: []
                }
              ]
            }
          ]
        },
        {
          id: 5,
          name: '节点2',
          children: []
        }
      ]
    }
  }
}
</script>

2. TreeNode组件

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

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

进阶功能

1. 添加展开/折叠功能

<template>
  <li>
    <span @click="toggle">{{ isOpen ? '-' : '+' }}</span>
    {{ node.name }}
    <ul v-if="isOpen && node.children && node.children.length">
      <tree-node
        v-for="child in node.children"
        :key="child.id"
        :node="child"
      />
    </ul>
  </li>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    node: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      isOpen: false
    }
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen
    }
  }
}
</script>

2. 添加复选框功能

<template>
  <li>
    <input type="checkbox" v-model="node.checked" @change="handleCheck">
    <span @click="toggle">{{ isOpen ? '-' : '+' }}</span>
    {{ node.name }}
    <ul v-if="isOpen && node.children && node.children.length">
      <tree-node
        v-for="child in node.children"
        :key="child.id"
        :node="child"
        @check-change="handleChildCheck"
      />
    </ul>
  </li>
</template>

<script>
export default {
  // ...
  methods: {
    handleCheck() {
      this.$emit('check-change', this.node)
    },
    handleChildCheck(node) {
      this.$emit('check-change', node)
    }
  }
}
</script>