el-select与el-tree结合使用，实现select框下拉使用树形结构选择数据

最新推荐文章于 2024-04-26 17:54:13 发布

菜鸡程序员_小小

最新推荐文章于 2024-04-26 17:54:13 发布

阅读量2.1k

点赞数 2

分类专栏：经验，学习前端 vue 文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/qingdatiankong/article/details/132193048

版权

经验，学习同时被 3 个专栏收录

114 篇文章 1 订阅

订阅专栏

前端

4 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

使用el-select与el-tree，实现如下效果，

代码如下：

注意点：搜索input框的代码一点放在option上面，不要放在option里面，否则一点击搜索框，下拉框就会收起来，不能使用。

<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>