ElementUI SelectTree

简述解决方案

在实际开发中，我们经常需要将下拉选择框和树形结构相结合，以实现更复杂的数据选择。ElementUI 的 Select 和 Tree 组件各自功能强大，但有时我们需要一种结合两者特性的组件。介绍如何通过自定义组件或配置方式，实现一个可搜索的树形选择器（SelectTree），并提供多种实现思路。

思路一：使用 el-cascader 模拟

ElementUI 提供了 el-cascader 级联选择器，虽然它主要用于多级联动选择，但也可以通过一些配置来模拟树形选择的效果。以下是具体实现步骤：

vue

  
</p>


export default {
  data() {
    return {
      selectedValue: [],
      treeData: [
        {
          value: '1',
          label: '一级 1',
          children: [
            {
              value: '1-1',
              label: '二级 1-1'
            }
          ]
        },
        {
          value: '2',
          label: '一级 2',
          children: [
            {
              value: '2-1',
              label: '二级 2-1'
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleChange(value) {
      console.log('选中的值:', value);
    }
  }
};


<p>

优点：

实现简单，无需额外组件
支持过滤搜索
可以选择任意层级节点

缺点：

不是标准的 select 行为
默认样式与 select 有一定差异

思路二：基于 el-select + el-tree 自定义组件

如果我们希望获得更接近原生 select 的体验，可以通过组合 el-select 和 el-tree 来创建一个自定义组件。以下是完整代码示例：

vue

  
    
    
  
  <el-tree
    ref="tree"
    v-show="false"
    :data="treeData"
    :props="defaultProps"
    show-checkbox
    node-key="id"
    @check-change="handleCheckChange"
    @node-click="handleNodeClick"
  >
  
</p>


export default {
  data() {
    return {
      selectedValue: null,
      selectedLabel: '',
      treeData: [], // 树形数据
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      allOptions: [], // 所有节点平铺后的选项
      filteredOptions: [] // 过滤后的选项
    };
  },
  mounted() {
    this.initTree();
  },
  methods: {
    initTree() {
      // 初始化树形数据
      this.treeData = [
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              id: 4,
              label: '二级 1-1'
            }
          ]
        },
        {
          id: 2,
          label: '一级 2',
          children: [
            {
              id: 5,
              label: '二级 2-1'
            }
          ]
        }
      ];

      // 将树形数据扁平化处理
      this.flattenTree(this.treeData, this.allOptions);
      this.filteredOptions = [...this.allOptions];
    },

    flattenTree(data, result) {
      data.forEach(item => {
        result.push({
          value: item.id,
          label: item.label
        });
        if (item.children && item.children.length) {
          this.flattenTree(item.children, result);
        }
      });
    },

    filterNodes(query) {
      if (query !== '') {
        this.$refs.tree.filter(query);
        this.filteredOptions = this.allOptions.filter(option =>
          option.label.toLowerCase().includes(query.toLowerCase())
        );
      } else {
        this.filteredOptions = [...this.allOptions];
      }
    },

    handleNodeClick(data) {
      this.selectedValue = data.id;
      this.selectedLabel = data.label;
      this.$refs.select.blur(); // 关闭下拉菜单
    }
  }
};


<p>

优点：

完全符合 select 使用习惯
支持模糊搜索
可以显示完整的树形结构
可以获取节点的完整路径

缺点：

实现较为复杂
需要处理较多细节问题

思路三：使用第三方库 vue-treeselect

除了自己实现外，还可以考虑使用成熟的第三方库如 vue-treeselect，它专门用于解决树形选择的问题，并且提供了丰富的功能。

安装方法：
bash npm install @riophae/vue-treeselect

使用示例：
```vue

import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';

export default {
components: { Treeselect },
data() {
return {
value: null,
options: [
{
id: 'a',
label: '一级 1',
children: [
{
id: 'aa',
label: '二级 1-1'
}
]
},
{
id: 'b',
label: '一级 2',
children: [
{
id: 'bb',
label: '二级 2-1'
}
]
}
]
};
}
};