el-select 结合 el-tree：树形下拉数据

一、单选

<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>