当前位置：首页 > VUE

vue实现treeselect

2026-01-07 22:20:14VUE

Vue TreeSelect 实现方法

使用 Vue 实现 TreeSelect 组件可以通过以下几种方式完成，包括使用现成的第三方库或自行封装组件。

使用第三方库

推荐使用成熟的第三方 TreeSelect 组件库，例如 vue-treeselect，这是一个专为 Vue.js 设计的树形选择组件，功能丰富且易于集成。

安装 vue-treeselect：

npm install @riophae/vue-treeselect

在 Vue 组件中使用：

<template>
  <div>
    <vue-treeselect
      v-model="selectedValue"
      :options="treeData"
      :multiple="true"
      placeholder="请选择..."
    />
  </div>
</template>

<script>
import VueTreeselect from '@riophae/vue-treeselect'

export default {
  components: { VueTreeselect },
  data() {
    return {
      selectedValue: null,
      treeData: [
        {
          id: 'group1',
          label: 'Group 1',
          children: [
            { id: 'item1', label: 'Item 1' },
            { id: 'item2', label: 'Item 2' },
          ],
        },
        {
          id: 'group2',
          label: 'Group 2',
          children: [
            { id: 'item3', label: 'Item 3' },
          ],
        },
      ],
    }
  },
}
</script>

自定义 TreeSelect 组件

如果需要更灵活的控制，可以基于 Element UI 或其他 UI 库的 Tree 和 Select 组件进行封装。

基于 Element UI 的实现示例：

<template>
  <div>
    <el-select
      v-model="selectedLabels"
      multiple
      placeholder="请选择"
      @remove-tag="handleRemoveTag"
    >
      <el-option
        v-for="item in flatOptions"
        :key="item.id"
        :label="item.label"
        :value="item.id"
        style="display: none"
      />
    </el-select>
    <el-tree
      ref="tree"
      :data="treeData"
      show-checkbox
      node-key="id"
      @check-change="handleCheckChange"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedLabels: [],
      selectedValues: [],
      treeData: [
        {
          id: 'group1',
          label: 'Group 1',
          children: [
            { id: 'item1', label: 'Item 1' },
            { id: 'item2', label: 'Item 2' },
          ],
        },
      ],
      flatOptions: [],
    }
  },
  methods: {
    handleCheckChange(node, isChecked) {
      if (isChecked) {
        this.selectedValues.push(node.id)
      } else {
        const index = this.selectedValues.indexOf(node.id)
        if (index !== -1) {
          this.selectedValues.splice(index, 1)
        }
      }
      this.selectedLabels = this.selectedValues
    },
    handleRemoveTag(tag) {
      const node = this.$refs.tree.getNode(tag)
      if (node) {
        this.$refs.tree.setChecked(node, false)
      }
    },
  },
}
</script>