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>
相关推荐
咚咚咚ddd几秒前
前端基建:SSE客户端封装,打造流畅的AI对话体验
前端·javascript·aigc
有仙则茗2 分钟前
JS 迭代器是什么东西
前端·javascript·面试
Spirited_Away8 分钟前
什么你还不会用navigation来管理导航?
前端·javascript·面试
Hilaku10 分钟前
为什么 React 18 的 concurrent 模式没人敢开?真不是我怂,是它太怪
前端·javascript·react.js
梨子同志18 分钟前
防抖(debounce)
前端·javascript
Mintopia22 分钟前
Three.js 自定义相机脚本:让镜头舞动起来
前端·javascript·three.js
Mintopia24 分钟前
骨骼动画:让数字角色跳出生命之舞
前端·javascript·计算机图形学
迷你二鹏24 分钟前
前端之JavaScript
前端·javascript
吃肉不吃皮37 分钟前
【Vue转React】更新机制对比,React开发中的心智负担从何而来?
前端·vue.js·react.js