el-select与el-tree结合使用,实现select框下拉使用树形结构选择数据

使用el-select与el-tree,实现如下效果,

代码如下:

注意点:搜索input框的代码一点放在option上面,不要放在option里面,否则一点击搜索框,下拉框就会收起来,不能使用。

TypeScript 复制代码
<el-select v-model="queryUserName" placeholder="使用人 所有" style="width:300px;" data-live-search="true" @visible-change="setUserTreeCheckNode" clearable @clear="clearUserNode">
            <el-input placeholder="搜索" v-model="userFilterText" clearable style="padding:0 20px 10px;" @input="filterUsertree"><i slot="prefix" class="el-input__icon el-icon-search" style="padding-left: 25px;"></i></el-input>
            <el-option value="queryUserName" style="min-height: 200px;overflow: auto;">
              <el-tree :data="userTreeData" show-checkbox node-key="label" :props="defaultProps" @check="userTreeCheck" ref="userTree" :filter-node-method="filterUserNode" :default-expanded-keys="['全部']">
              </el-tree>
            </el-option>
          </el-select>
相关推荐
zhifou12345615 分钟前
Vue基础(二)
前端·javascript·vue.js
默_笙33 分钟前
🙃 我让爬虫终于看到了我的网站,后端同事说"这也行?"(下):App Router 全栈实战
前端·javascript
九九落39 分钟前
JavaScript 实现北京时间精确到毫秒显示:UTC+8、Asia/Shanghai 与在线时间校准详解
开发语言·javascript·ecmascript
FEF前端团队1 小时前
小程序微信支付 V3 接入实战手册:从商户配置到前后端落地
javascript·后端·node.js
你脑门上的脚印2 小时前
Vue 项目从零实现语音转文字、文字转语音功能(完整可用 + 踩坑指南)
前端·vue.js
悟空瞎说3 小时前
# Dispatch(GCD)苹果官方文档 白话文讲解(Objective‑C 版本文档)
javascript
七牛开发者3 小时前
Coding Agent 如何跑稳长任务?从上下文管理到运行时状态
前端·javascript·后端
七牛开发者3 小时前
拆解 DeepSeek Harness:Profile 与 Bundle 如何装配运行时
前端·javascript·后端
lemon_yyds4 小时前
H5 页面嵌入 APP 的 web-view 时-调用原生能力(uniapp)
vue.js
九九落5 小时前
北京时间校准怎么做?电脑和手机时间不准的排查方法
javascript