当前位置：首页 > VUE

vue实现树形选择框

2026-01-21 14:29:19VUE

vue实现树形选择框的方法

使用Vue实现树形选择框可以借助第三方组件库或自定义组件。以下是几种常见实现方式：

使用Element UI的TreeSelect组件

Element UI提供了el-tree-select组件，结合了树形结构和下拉选择功能：

vue实现树形选择框

<template>
  <el-tree-select
    v-model="selectedValue"
    :data="treeData"
    :props="defaultProps"
    check-strictly
  />
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      treeData: [{
        label: '一级节点',
        children: [{
          label: '二级节点'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  }
}
</script>

使用Ant Design Vue的TreeSelect

Ant Design Vue也提供了类似组件：

vue实现树形选择框

<template>
  <a-tree-select
    v-model:value="value"
    style="width: 100%"
    :tree-data="treeData"
    :field-names="{
      children: 'children',
      label: 'title',
      key: 'value'
    }"
  />
</template>

自定义树形选择组件

如果需要完全自定义实现，可以结合el-tree和el-select：

<template>
  <el-select
    v-model="selectedLabels"
    multiple
    placeholder="请选择"
    @focus="showTree = true"
  >
    <el-option
      v-for="item in selectedOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>

  <el-tree
    v-if="showTree"
    ref="tree"
    :data="treeData"
    show-checkbox
    node-key="id"
    @check-change="handleCheckChange"
  />
</template>

<script>
export default {
  data() {
    return {
      showTree: false,
      selectedLabels: [],
      selectedOptions: [],
      treeData: [
        {
          id: 1,
          label: '一级节点',
          children: [
            {
              id: 2,
              label: '二级节点'
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleCheckChange(data, checked) {
      if(checked) {
        this.selectedOptions.push({
          value: data.id,
          label: data.label
        })
      }
    }
  }
}
</script>

使用Vue递归组件实现

对于更灵活的定制需求，可以使用递归组件：

<template>
  <div class="tree-select">
    <div @click="toggleOpen" class="selected-items">
      {{ selectedItems.join(', ') || '请选择' }}
    </div>
    <div v-if="isOpen" class="tree-container">
      <tree-node
        v-for="node in treeData"
        :key="node.id"
        :node="node"
        @select="handleSelect"
      />
    </div>
  </div>
</template>

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

export default {
  components: { TreeNode },
  data() {
    return {
      isOpen: false,
      selectedItems: [],
      treeData: [
        {
          id: 1,
          label: '一级节点',
          children: [
            {
              id: 2,
              label: '二级节点',
              children: []
            }
          ]
        }
      ]
    }
  },
  methods: {
    toggleOpen() {
      this.isOpen = !this.isOpen
    },
    handleSelect(node) {
      this.selectedItems.push(node.label)
    }
  }
}
</script>