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>
相关推荐
CC码码10 分钟前
不修改DOM的高亮黑科技,你可能还不知道
前端·javascript·面试
虚诚13 分钟前
vue2中树形表格怎么实现
前端·javascript·vue.js·ecmascript·vue2·树形结构
哈__1 小时前
React Native 鸿蒙跨平台开发:下拉刷新功能
javascript·react native·react.js
没有鸡汤吃不下饭1 小时前
前端打包出一个项目(文件夹),怎么本地快速启一个服务运行
前端·javascript
CUYG1 小时前
v-model封装组件(定义 model 属性)
前端·vue.js
遇见~未来2 小时前
JavaScript数组全解析:从本质到高级技巧
开发语言·前端·javascript
哈__2 小时前
基础入门 React Native 鸿蒙跨平台开发:TabBar 底部导航栏
javascript·react native·react.js
lili-felicity2 小时前
React Native 鸿蒙跨平台开发:Animated 实现鸿蒙端组件的左右滑动动画
javascript·react native·react.js
哈__2 小时前
React Native 鸿蒙跨平台开发:StatusBar 状态栏组件
javascript·react native·react.js
丢,捞仔3 小时前
uni-app上架应用添加权限提示框
前端·javascript·uni-app