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>
相关推荐
郑州光合科技余经理1 天前
实战分享:如何构建东南亚高并发跑腿配送系统
java·开发语言·javascript·spring cloud·uni-app·c#·php
June bug1 天前
【Vue】EACCES: permission denied 错误
前端·javascript·vue.js
一只小阿乐1 天前
react 中的组件性能优化
前端·javascript·react.js·react组件性能优化
xiaoxue..1 天前
二叉树深度解析:从基础结构到实战应用
javascript·数据结构·面试
月巴月巴白勺合鸟月半1 天前
一个医学编码的服务
服务器·前端·javascript
JS_GGbond1 天前
给DOM元素加超能力:Vue自定义指令入门指南
前端·vue.js
T___T1 天前
用 Vite 搭建现代化 Vue 3 项目:从零到工程化入门
前端·vue.js
方也_arkling1 天前
【JS】定时器的使用(点击开始计时,再次点击停止计时)
开发语言·前端·javascript
JS_GGbond1 天前
Vue原型链:让你的组件继承“超能力”
前端·vue.js
乆夨(jiuze)1 天前
不是所有的链式调用,都是Promise函数,Promise 规范及其衍生的 Promise/A+ 规范
前端·javascript·vue.js