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>
相关推荐
NiNg_1_23431 分钟前
JS模块化工具requirejs详解
开发语言·javascript·ecmascript
果子切克now37 分钟前
vue2与vue3知识点
前端·javascript·vue.js
积水成江1 小时前
Vite+Vue3+SpringBoot项目如何打包部署
java·前端·vue.js·windows·spring boot·后端·nginx
一丝晨光1 小时前
Web技术简史、前后端分离、游戏
前端·javascript·css·游戏·unity·前后端分离·cocos
哪 吒2 小时前
华为OD机试 - 冠亚军排名(Python/JS/C/C++ 2024 E卷 100分)
javascript·python·华为od
&白帝&3 小时前
Vue.js 过渡 & 动画
前端·javascript
计算机程序设计开发3 小时前
人口普查管理系统基于VUE+SpringBoot+Spring+SpringMVC+MyBatis开发设计与实现
vue.js·spring boot·毕业设计·课程设计·计算机毕业设计·计算机毕业论文
小雨cc5566ru4 小时前
Thinkphp/Laravel基于vue.js的社区健康服务管理系统Vscode毕业设计成品源码_0i0k4
vue.js·vscode·laravel
小雨cc5566ru4 小时前
Thinkphp/Laravel基于vue的金融理财产品销售系统设计与实现Vscode毕业设计成品源码.
vue.js·金融·laravel
Fanfffff7204 小时前
深入探索Vue3组合式API
前端·javascript·vue.js