下拉选择（使用el-select和el-tree相结合实现下拉选择）

树形下拉控件

实现效果

el-select嵌套el-option，el-option嵌套el-tree。

VUE3代码

elementDemo04.vue

<template> <div class="elementDemo04"> <el-form ref="formRef" :inline="true" :model="queryFrom" label-width="160px" size="default" style="width: 75%" > <el-form-item label="所属部门"> <el-select ref="selectTreeRef" v-model="stateData.queryFrom.orgName" placeholder="请选择所属部门" > <el-option value="stateData.queryFrom.orgId" class="optionTree"> <el-tree ref="treeRef" default-expand-all :data="stateData.treeList" :props="{ children: 'children', label: 'name' }" @node-click="handleTreeNodeClick" /> </el-option> </el-select> </el-form-item> <el-form-item> <el-button type="primary" @click="onQuery">查询</el-button> </el-form-item> </el-form> </div> </template> <script setup> import { ref, reactive } from "vue"; import { ElMessage, ElMessageBox } from 'element-plus'; // 数据 const stateData = reactive({ queryFrom:{ }, treeList: [ { id: "1497055230288723968", name: "公司组织架构", parentId: '-1', entry: { id: "1497055230288723968", name: "公司组织架构", code: "1497055230288723968", type: 1, status: 1, parentId: "-1", treeLevel: 1, parentFullPath: "", sorted: 1, remarks: "", belongOrgId: "-1", logicalDeleted: 0, createUid: "1", createUser: "super", createTime: "2022-02-25T03:45:55.000+00:00", }, selected: 0, children: [ { id: "1497055360492503040", name: "人力资源部", parentId: "1497055230288723968", entry: { id: "1497055360492503040", name: "人力资源部", code: "A1234B01", type: 3, status: 1, parentId: "1497055230288723968", treeLevel: 2, parentFullPath: "1497055230288723968", sorted: 1, remarks: "", belongOrgId: "1497055230288723968", logicalDeleted: 0, createUid: "1", createUser: "super", createTime: "2022-02-25T03:46:27.000+00:00", }, selected: 0, children: [], }, { id: "1497055472115515392", name: "行政服务部", parentId: "1497055230288723968", entry: { id: "1497055472115515392", name: "行政服务部", code: "A1234B02", type: 4, status: 1, parentId: "1497055230288723968", treeLevel: 2, parentFullPath: "1497055230288723968", sorted: 2, remarks: "", belongOrgId: "1497055230288723968", logicalDeleted: 0, createUid: "1", createUser: "super", createTime: "2022-02-25T03:46:53.000+00:00", }, selected: 0, children: [], }, { id: "1497057243579809792", name: "研发中心", parentId: "1497055230288723968", entry: { id: "1497057243579809792", name: "研发中心", code: "A123401", type: 1, status: 1, parentId: "1497055230288723968", treeLevel: 2, parentFullPath: "1497055230288723968", sorted: 4, remarks: "", belongOrgId: "1497055230288723968", logicalDeleted: 0, createUid: "1", createUser: "super", createTime: "2022-02-25T03:53:56.000+00:00", }, selected: 0, children: [ { id: "1497057326488616960", name: "产品部", parentId: 1497057243579809800, entry: { id: "1497057326488616960", name: "产品部", code: "A34444", type: 3, status: 1, parentId: "1497057243579809792", treeLevel: 3, parentFullPath: "1497055230288723968,1497057243579809792", sorted: 1, remarks: "", belongOrgId: "1497057243579809792", logicalDeleted: 0, createUid: "1", createUser: "super", createTime: "2022-02-25T03:54:15.000+00:00", }, selected: 0, children: [], }, { id: "1497057326488616961", name: "研发部", parentId: "1497057243579809792", entry: { id: "1497057326488616961", name: "开发部", code: "A34444", type: 3, status: 1, parentId: "1497057243579809792", treeLevel: 3, parentFullPath: "1497055230288723968,1497057243579809792", sorted: 1, remarks: "", belongOrgId: "1497057243579809792", logicalDeleted: 0, createUid: "1", createUser: "super", createTime: "2022-02-25T03:54:15.000+00:00", }, selected: 0, children: [], }, { id: "1497057326488616961", name: "测试部", parentId: "1497057243579809792", entry: { id: "1497057326488616961", name: "开发部", code: "A34434", type: 3, status: 1, parentId: "1497057243579809792", treeLevel: 3, parentFullPath: "1497055230288723968,1497057243579809792", sorted: 1, remarks: "", belongOrgId: "1497057243579809792", logicalDeleted: 0, createUid: "1", createUser: "super", createTime: "2022-02-25T03:54:15.000+00:00", }, selected: 0, children: [], }, { id: "1497057326488616963", name: "售后部", parentId: "1497057243579809792", entry: { id: "1497057326488616961", name: "开发部", code: "A34434", type: 3, status: 1, parentId: "1497057243579809792", treeLevel: 3, parentFullPath: "1497055230288723968,1497057243579809792", sorted: 1, remarks: "", belongOrgId: "1497057243579809792", logicalDeleted: 0, createUid: "1", createUser: "super", createTime: "2022-02-25T03:54:15.000+00:00", }, selected: 0, children: [], }, ], }, { id: "1501744401741774848", name: "数据中心", parentId: "1497055230288723968", entry: { id: "1501744401741774848", name: "数据中心", code: "S2333", type: 1, status: 1, parentId: "1497055230288723968", treeLevel: 2, parentFullPath: "1497055230288723968", sorted: 1, remarks: "", belongOrgId: "1497055230288723968", logicalDeleted: 0, createUid: "1", createUser: "super", createTime: "2022-03-10T02:19:01.000+00:00" }, selected: 0, children: [ { id: "1501744846480605184", name: "网络运维部", parentId: "1501744401741774848", entry: { id: "1501744846480605184", name: "网络运维部", code: "1111", type: 1, status: 1, parentId: "1501744401741774848", treeLevel: 3, parentFullPath: "1497055230288723968,1501744401741774848", sorted: 12, remarks: "", belongOrgId: "1501744401741774848", logicalDeleted: 0, createUid: "1", createUser: "super", createTime: "2022-03-10T02:20:47.000+00:00", }, selected: 0, children: [], }, { id: "1501744846480605184", name: "技术支撑部", parentId: "1501744401741774848", entry: { id: "1501744846480605184", name: "技术支撑部", code: "123455", type: 1, status: 1, parentId: "1501744401741774848", treeLevel: 3, parentFullPath: "1497055230288723968,1501744401741774848", sorted: 12, remarks: "", belongOrgId: "1501744401741774848", logicalDeleted: 0, createUid: "1", createUser: "super", createTime: "2022-03-10T02:20:47.000+00:00", }, selected: 0, children: [], }, ], }, ], }, ], }); // ref const formRef = ref(null); const selectTreeRef = ref(null); const treeRef = ref(null); // 选中树 const handleTreeNodeClick = (item) => { if (item.children.length <= 0) { stateData.queryFrom.orgName = item.name; stateData.queryFrom.orgId = item.id; selectTreeRef.value.blur(); } }; // 执行查询 const onQuery = () =>{ ElMessage({ message: '选择数据：' + stateData.queryFrom.orgId + "->" + stateData.queryFrom.orgName, grouping: true, type: 'success', }); }; </script> <style lang="scss" scoped> .optionTree { padding: 0 1px; // height: inherit; 是会继承父元素的高度 height: inherit !important; line-height: 0; max-height: 300px; overflow: auto; background: rgb(235, 141, 141) !important; } </style>