1、效果图

2、封装组件SelectTree

<!--* @Author: zhangming zhangming@sinoma-tianjin.cn* @Date: 2024-03-14 10:45:54* @LastEditors: zhangming zhangming@sinoma-tianjin.cn* @LastEditTime: 2024-03-14 11:25:51* @FilePath: \Frontend\src\common\components\selectTree.vue* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<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 setup>
import { defineComponent, ref, watch, onMounted } from 'vue';
const props = defineProps({modelValue: { type: String, default: '' },disabled: {type: Boolean,default: false,},options: {type: Array,default: () => [],},
});
const mySelect = ref();
const optionValue = ref('');
const emit = defineEmits(['nodeclick', 'update:modelValue']);watch(() => {return props.modelValue;},() => {optionValue.value = getLable(props.options, props.modelValue);}
);const getLable = (arr, value) => {let res = '';function find(arr, value) {for (let i = 0; i < arr.length; i++) {if (arr[i].value === value) {res = arr[i].label;}if (arr[i].children && arr[i].children.length) {find(arr[i].children, value);}}}find(arr, value);return res;
};const handleNodeClick = (node) => {optionValue.value = node.label;mySelect.value.blur();emit('nodeclick', node);emit('update:modelValue', node.value);
};
</script><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 :deep(.el-tree .el-tree-node__content) {height: auto;padding: 0 20px;
}
.el-tree-node__label {font-weight: normal;
}
.el-tree :deep(.is-current .el-tree-node__label) {color: #409eff;font-weight: 700;
}
.el-tree :deep(.is-current .el-tree-node__children .el-tree-node__label) {color: #606266;font-weight: normal;
}
.selectInput {padding: 0 5px;box-sizing: border-box;
}
</style>

3、使用

<SelectTree v-model="form.elName" :options="treeList" @nodeclick="handleSelect" />const handleSelect = (data) => {//下拉树形选择console.log('下拉树形选择');console.log(data);
};