一、單選

<template><div class="selectTree-wapper"><el-selectv-model="selectValue"placeholder="請選擇"popper-class="custom-el-select-class"ref="selectRef"clearable@clear="clearHandle"><el-option :label="selectlabel" :value="selectValue"><el-tree:data="treeData":props="defaultProps"node-key="id"highlight-current:check-strictly="true":expand-on-click-node="true"ref="treeRef"@node-click="handleNodeClick"><template #default="{ node, data }"><span :class="{ 'special-node': data.id === selectValue }">{{ node.label }}</span></template></el-tree></el-option></el-select></div>
</template><script>
export default {name: "selectTree",components: {},props: {},data() {return {selectlabel: "", // 選項labelselectValue: "", // 選項valuetreeData: [{id: "1",name: "一級 1",children: [{id: "2",name: "二級 1-1",children: [{id: "3",name: "三級 1-1-1",},],},],},{id: "4",name: "一級 2",children: [{id: "5",name: "二級 2-1",children: [{id: "6",name: "三級 2-1-1",},],},{id: "7",name: "二級 2-2",children: [{id: "8",name: "三級 2-2-1",},],},],},],defaultProps: {children: "children",label: "name",},};},mounted() {},methods: {/*** 點擊節點*/handleNodeClick(data) {// 這里的賦值判斷邏輯自定義if (data.children && data.children.length) {return false;}// 賦值this.selectValue = data.id;this.selectlabel = data.name;// 收起下拉框;this.$refs.selectRef.blur();// 收起treeif (this.$refs.treeRef) {const nodes = this.$refs.treeRef.store._getAllNodes();nodes.forEach((node) => {node.expanded = false;});}},/*** 清除*/clearHandle() {this.selectValue = "";this.selectlabel = "";},},watch: {},
};
</script><style lang='scss'>
.custom-el-select-class {.el-select-dropdown__list {height: fit-content;max-height: 274px;.el-select-dropdown__item {height: auto;overflow: visible;padding: 0px 10px;}}.el-select-dropdown__item.hover,.el-select-dropdown__item:hover {background-color: #ffffff;}.special-node {color: red;}
}
</style>

二、多選

<template><div class="selectTree-wapper"><el-selectv-model="selectlabel"placeholder="請選擇"popper-class="custom-el-select-class"ref="selectRef"multiplecollapse-tagsclearable@clear="clearHanlde"@remove-tag="removeTag"style="width: 300px"><el-option :value="selectValue"><el-tree:data="treeData":props="defaultProps"node-key="id"show-checkbox:check-strictly="false":expand-on-click-node="true"ref="treeRef"@check-change="handleCheckChange"><template #default="{ node, data }"><span :class="{ 'special-node': data.id === selectValue }">{{ node.label }}</span></template></el-tree></el-option></el-select></div>
</template><script>
export default {name: "selectTree",components: {},props: {},data() {return {selectlabel: [], // 選項labelselectValue: [], // 選項valuetreeData: [{id: "1",name: "一級 1",children: [{id: "2",name: "二級 1-1",children: [{id: "3",name: "三級 1-1-1",},],},],},{id: "4",name: "一級 2",children: [{id: "5",name: "二級 2-1",children: [{id: "6",name: "三級 2-1-1",},],},{id: "7",name: "二級 2-2",children: [{id: "8",name: "三級 2-2-1",},],},],},],defaultProps: {children: "children",label: "name",},};},mounted() {},methods: {/*** 選擇改變*/handleCheckChange() {// 獲取所有選中的節點const selectNodes = this.$refs.treeRef.getCheckedNodes();// 只要葉子節點數據const nodes = selectNodes.filter((node) => !(node.children && node.children.length));this.selectValue = nodes.map((node) => node.id);this.selectlabel = nodes.map((node) => node.name);},/*** 清除*/clearHanlde() {this.selectlabel = [];this.selectValue = [];},/*** 移除*/removeTag(tag) {console.log("tag", tag);// 使用 collapse-tags 后，移除的是第一個this.selectValue.shift();this.$nextTick(() => {this.$refs.treeRef.setCheckedKeys(this.selectValue);});},},watch: {},
};
</script><style lang='scss'>
.custom-el-select-class {.el-select-dropdown__list {height: fit-content;max-height: 274px;.el-select-dropdown__item {height: auto;overflow: visible;padding: 0px 10px;}}.el-select-dropdown__item.hover,.el-select-dropdown__item:hover {background-color: #ffffff;}.special-node {color: red;}
}
</style>

三、單選+懶加載

<template><div class="selectTree-wapper"><el-selectv-model="selectValue"placeholder="請選擇"popper-class="custom-el-select-class"><el-option :label="selectlabel" :value="selectValue"><el-tree:props="props":load="loadNode"lazynode-key="id":check-strictly="true":expand-on-click-node="false"@node-click="handleNodeClick"></el-tree></el-option></el-select></div>
</template><script>
export default {name: "selectTree",components: {},props: {},data() {return {selectlabel: "", // 選項labelselectValue: "", // 選項valueprops: {label: "name",children: "children",},};},mounted() {},methods: {/*** 加載節點*/loadNode(node, resolve) {// 第一次請求，默認id為0let id = node.data?.id ? node.data.id : 0;const data = this.getLazyList(id);resolve(data || []);},/*** 請求數據，這里模擬接口返回假數據*/getLazyList(id) {let data = [];if (id !== "3") {data = [{id: "1",name: "節點a",},{id: "2",name: "節點b",},{id: "3",name: "節點c",},];}return data;},/*** 點擊節點*/handleNodeClick(data) {this.selectValue = data.id;this.selectlabel = data.name;},},watch: {},
};
</script><style lang='scss'>
.custom-el-select-class {.el-select-dropdown__list {height: fit-content;max-height: 274px;.el-select-dropdown__item {height: auto;overflow: visible;padding: 0px 10px;}}.el-select-dropdown__item.hover,.el-select-dropdown__item:hover {background-color: #ffffff;}
}
</style>