如果你想实现一个下拉树的组件，可以直接使用 element plus 中的 treeSelect 组件，但是如果你的项目正在用的是 element 2.X 版本，那么它是不包含 treeSelect 组件的，但是我们还是可以基于一些第三方的插件 比如：@riophae/vue-treeselect 插件。
使用方法
1 安装
npm i @riophae/vue-treeselect
// 或
yarn add @riophae/vue-treeselect
2 引入
为方便使用，我们可以在全局引入。在 main.js 全局引入，并注册全局组件。
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
Vue.component('treeselect', Treeselect)
3 使用示例
<template>
<div class="box">
<treeselect v-model="selectedItems" placeholder="请选择" :options="treeData"></treeselect>
</div>
</template>
<script>
export default {
data() {
return {
selectedItems: null,
treeData: [
{
id: 1,
label: "水果",
children: [
{ id: 2, label: "西瓜" },
{ id: 3, label: "香蕉" },
{ id: 4, label: "橙子" },
],
},
{
id: 5,
label: "蔬菜",
children: [
{ id: 6, label: "西红柿" },
{ id: 7, label: "黄瓜" },
{ id: 8, label: "青菜" },
],
},
{
id: 9,
label: "零食",
children: [
{ id: 10, label: "薯片" },
{ id: 11, label: "巧克力" },
],
},
],
};
},
};
</script>
常见问题
（1）占位符 unknown，或其他异常报错。
解决方法：
v-model 不能写成空字符串或者空数组，否则会出现 unknown，可以默认是 null。
（2）数据提示英文
解决方法
使用 noChildrenText、noOptionsText 和 noResultsText 自定义文本的属性。
- noChildrenText：用于定义当某个选项没有子选项时的文本提示。例如，当一个分类没有子分类时，可以使用 noChildrenText 来显示相应的提示文本。
- noOptionsText：用于定义当没有可选项时的文本提示。例如，当数据为空或没有匹配的选项时，可以使用 noOptionsText 来显示相应的提示文本。
- noResultsText：用于定义当搜索结果为空时的文本提示。例如，当用户进行搜索但没有匹配的结果时，可以使用 noResultsText 来显示相应的提示文本。
<treeselect v-model="selectedItems" :options="treeData"
noChildrenText="没有子选项" noOptionsText="没有可选项" noResultsText="没有匹配的结果"></treeselect>
（3）数据结构不符合
很多时候后台返回回来的数据结构的字段并不是 id、label、children 这些，这个时候就需要我们将其换成符合要求的数据结构。
这时候我们可以使用 normalizer 属性，它用于规范化选项数据。通过 normalizer 属性，你可以自定义选项数据的结构，以适应插件的要求。
（4）获取选中节点对象而不是单一的值
valueFormat 属性能够决定 value 属性的格式。
- 当设置为 id 时，value 属性的格式就是 id 或 id 数组。
- 当设置为 object 时，value 属性的格式就是 node 或 node 数组。
