工作中最近用到树结构的下拉选择器，也是参考别人文档做了下简单封装，还是挺简单易用的。
```
<template>
<el-select
ref="mySelect"
v-bind="$attrs"
v-model="optionValue"
:multiple="false"
:disabled="disabled"
>
<el-option :value="optionValue" :label="optionValue" class="options">
<el-tree
id="tree-option"
ref="selectTree"
default-expand-all
:data="options"
@node-click="handleNodeClick"
/>
</el-option>
</el-select>
</template>
<script>
import { defineComponent, ref, onMounted } from "vue";
export default defineComponent({
name: "mySelect",
props: {
modelValue: { type: String, default: "" },
disabled: {
type: Boolean,
default: false,
},
options: {
type: Array,
default: () => [
{
label: "选项1",
value: "1",
children: [{ label: "选项1-1", value: "1-1" }],
},
{ label: "选项2", value: "2" },
],
},
},
emits: ["nodeClick", "update:modelValue"],
setup(props, context) {
function findLabel(arr, value) {
for (let i = 0; i < arr.length; i++) {
if (arr[i].value === value) {
return arr[i].label;
}
if (arr[i].children && arr[i].children.length) {
return findLabel(arr[i].children, value);
}
}
return "";
}
onMounted(() => {
optionValue.value = findLabel(props.options, props.modelValue);
});
const mySelect = ref();
const optionValue = ref("");
function handleNodeClick(node) {
optionValue.value = node.label;
mySelect.value.blur();
context.emit("nodeClick", node);
context.emit("update:modelValue", node.value);
}
return {
mySelect,
handleNodeClick,
optionValue,
};
},
});
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
height: auto;
max-height: 274px;
padding: 0;
overflow: hidden;
overflow-y: auto;
}
.el-select-dropdown__item.selected {
font-weight: normal;
}
ul li >>> .el-tree .el-tree-node__content {
height: auto;
padding: 0 20px;
}
.el-tree-node__label {
font-weight: normal;
}
.el-tree >>> .is-current .el-tree-node__label {
color: #409eff;
font-weight: 700;
}
.el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
color: #606266;
font-weight: normal;
}
.selectInput {
padding: 0 5px;
box-sizing: border-box;
}
</style>
```
使用
```
<template>
<div class="hello">
<selectTreeVue v-model="value" @treeSelect="handleSelect" />
</div>
</template>
<script>
import selectTreeVue from "./select-tree.vue";
import { defineComponent, ref } from "vue";
export default defineComponent({
name: "HelloWorld",
components: { selectTreeVue },
setup() {
const value = ref("");
function handleSelect(data) {
console.log(data);
}
return {
handleSelect,
value,
};
},
});
</script>
```
比较简单，不过不能使用多选，所以在组件内部屏蔽掉了该属性。
2021.11.1
增加了初始化显示的label，用递归遍历了一下。
