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>
相关推荐
像素之间8 分钟前
为什么运行时要加set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve
前端·javascript·vue.js
M ? A11 分钟前
Vue转React实战:defineProps精准迁移实战
前端·javascript·vue.js·经验分享·react.js·开源·vureact
如意猴25 分钟前
【前端】002--怎样制作一个简历界面?
开发语言·前端·javascript
comerzhang65536 分钟前
手撕 V8:我是如何用 2.67ms 的心跳活捉 700ms 冻结幽灵的
javascript
im_AMBER37 分钟前
手撕发布订阅与观察者模式:从原理到实践
前端·javascript·面试
JokerLee...1 小时前
大屏自适应方案
前端·vue.js·大屏端
kyriewen1 小时前
重排、重绘、合成:浏览器渲染的“三兄弟”,你惹不起也躲不过
前端·javascript·浏览器
Wect1 小时前
JS 手撕:对象创建、继承全解析
前端·javascript·面试
PeterMap2 小时前
Vue.js全面解析:从入门到上手,前端新手的首选框架
前端·vue.js
3秒一个大2 小时前
深入理解 JS 中的栈与堆:从内存模型到数据结构,再谈内存泄漏
前端·javascript·数据结构