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>
相关推荐
学习笔记1012 小时前
第十五章认识Ajax(六)
前端·javascript·ajax
程序员杨工4 小时前
【原创】SpringBoot3+Vue3客户管理系统
vue.js·springboot
theOtherSky5 小时前
element+vue3 table上下左右键切换input和select
javascript·vue.js·elementui·1024程序员节
会联营的陆逊5 小时前
JavaScript 如何优雅的实现一个时间处理插件
javascript
over6976 小时前
浏览器里的AI魔法:用JavaScript玩转自然语言处理
前端·javascript
Amy_cx6 小时前
搭建React Native开发环境
javascript·react native·react.js
代码AI弗森6 小时前
Python × NumPy」 vs 「JavaScript × TensorFlow.js」生态全景图
javascript·python·numpy
疏狂难除6 小时前
关于spiderdemo第二题的奇思妙想
javascript·爬虫
渣渣盟6 小时前
探索Word2Vec:从文本向量化到中文语料处理
前端·javascript·python·文本向量化