当前位置：首页 > VUE

vue 实现树选项

2026-01-16 18:57:01VUE

Vue 实现树形选项

在 Vue 中实现树形选项可以通过递归组件或第三方库（如 element-ui 的 el-tree）来完成。以下是两种常见的方法：

使用递归组件

递归组件是 Vue 中实现树形结构的原生方式，适合自定义需求较强的场景。

定义树形组件
创建一个递归组件，通过 name 属性使其可以调用自身。

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

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

使用组件
在父组件中传入树形数据。

<template>
  <div>
    <tree-node :data="treeData" />
  </div>
</template>

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

export default {
  components: { TreeNode },
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: '节点1',
          children: [
            { id: 2, label: '子节点1' },
            { id: 3, label: '子节点2' },
          ],
        },
      ],
    };
  },
};
</script>

使用 Element UI 的 `el-tree`

如果项目中使用 element-ui，可以直接使用其提供的 el-tree 组件。

安装 Element UI
确保已安装 element-ui。
```
npm install element-ui
```

引入并使用 el-tree
在组件中引入并绑定树形数据。

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

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