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

最新推荐文章于 2024-07-23 17:35:39 发布
最新推荐文章于 2024-07-23 17:35:39 发布
阅读量2.4k 收藏 1
点赞数 2
分类专栏： 经验，学习 前端 vue 文章标签： vue.js javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qingdatiankong/article/details/132193048
版权
经验，学习 同时被 3 个专栏收录
117 篇文章 1 订阅
订阅专栏
前端
8 篇文章 0 订阅
订阅专栏
vue
5 篇文章 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>

菜鸡程序员_小小
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
elementUI，实现el-select + el-tree组合成下拉树。
weixin_38395200的博客
05-20 5010
elementUI 官网API elementUI 中有Select 选择器，效果是这样的。 Tree 树形控件的效果是这样的。 我们在实际开发中需要用到下拉树，elementUI 是没有这个组件的，我们就要自己去写了。下面是我开发中用到的，记录一下el-select + el-tree组合，直接贴代码。 <el-select v-model="baseTableName" class="select-unitName select-option-father" popper-class="se
el-select-tree:ElementUI的el-select与el-tree结合
05-07
精选树 ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-select-tree/lib/element-ui' ; 全球注册 import Vue from 'vue' ; import ElSelectTree from 'el-select-tree' ; Vue . use ( ElSelectTree ) ; 组件内注册 import ElSelectTree from 'el-select-tree' ; export default { components : { ElSelectTree } } ; 完
ele-tree-select:基于elementUI的下拉树插件
05-13
github 说明 此插件是基于elementUI开发的下拉树组件 目前不支持单选,暂只支持多选 安装 npm i ele-tree-select -S 使用 在 main.js 中引入 import EleTreeSelect from 'ele-tree-select' import 'ele-tree-select/lib/ele-tree-select.css' Vue.use(EleTreeSelect) 属性 属性 说明 类型 是否必传 默认值 可选值 props 配置选项 object 否 见下面配置选项 -- code 作为组件的唯一标志返回 string 否 -- -- treeData 作为组件的数据传入，如果开启懒加载，需要将异步获取的数据组装成树型数据传入 array 是 -- -- clearable 是否可清空选项 boolean 否 true false ac
vue2 实现树形选择器（el-tree/el-select）绝对有效！！！
weixin_56075623的博客
06-20 778
说明:必须要有两个opitons，选择器组件内部没有options，会导致无法渲染内容。第一个options的作用是因为，当selectArr为空数组的时候，option节点在html中没有生成，会导致下拉框会显示无。
基于Element UI内置的Select下拉和Tree树形组件，组合封装的树状下拉选择器
最新发布
WindfallSheng的博客
07-23 1612
基于Element UI内置的Select下拉和Tree树形组件，组合封装的树状下拉选择器
el-select结合el-tree封装组件
weixin_48138386的博客
01-02 791
最近需求： 弹框里面放一个下拉框，下拉框内容是一个树状结构。重点：@visible-change下拉框出现/隐藏时触发。或者用el-input和el-tree代替。
el-select和el-tree结合使用-树形结构多选框
热门推荐
s_9527_s的博客
06-16 1万+
el-select和el-tree结合使用-树形结构多选框
el-select与el-tree结合，实现下拉框树结构，可搜索，自动定位到树结构下的第一个节点处
qq_41984913的博客
08-19 1178
*
el-select结合el-tree实现树形多选
m0_67841039的博客
10-10 7395
el-select结合el-tree实现树形多选
el-select中嵌套el-tree
weixin_44524835的博客
12-08 2643
实现效果： 代码： <template> <div> <el-select v-model="value" multiple @change="selectChange"> <el-option style="height: auto" :value="selectedValue">
el-select+el-tree实现树形选择器
qq_44805000的博客
12-22 788
看别人写的select+tree实现树形选择器比较奇葩，具体实现是将整个tree放入一个select-item，需要自己写交互逻辑，很麻烦，所以自己使用tree的slot写入item。
el-tree-select:基于el-select和el-tree改造的树形选择器（下拉框）组件
05-10
树选择 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build
组合element里面的select和tree实现的treeSelect选择器
08-09
SelectTree是组合element里面的select和tree两者实现的，可以实现多选，单选，同时选中以后关闭下拉框等操作
el-select 下拉框多选实现全选的实现
10-16
在Web前端开发中，el-select是Element UI库中提供的一个常用的下拉选择组件。它可以方便地实现单选或多选功能，但在某些场景下，用户需要实现全选功能，即在多选下拉框中可以选择或取消选择所有选项。文章《el-...
el-select数据过多懒加载的解决(loadmore)
10-16
在前端开发中，使用el-select组件来实现下拉选择功能是相当普遍的。不过，在处理大量数据时，若直接渲染所有数据项，会导致el-select组件的渲染性能下降，甚至可能导致界面卡顿。为了解决这一问题，可以通过实现懒...
el-select + el-tree
趟过java，遇见web
12-22 333
el-select ，el-table，树组件
el-select+el-tree实现树形分组+多选+搜索的选择器
weixin_60886885的博客
05-31 3357
【代码】el-select+el-tree实现树形分组+多选+搜索的选择器。
通过el-select选择器和el-tree树形结构二次封装(vue2+elementUI)，开发element-plus的TreeSelect树形选择器
qq_43217258的博客
03-13 2320
领导看我在另一个vue3项目的el-tree-select挺好的，叫我移入vue2的项目中。 但是vue2版本的elementUI，并没有这个组件，所以只能自己找，找半天找不到和它差不多的，通过网友写的组件改写的
【vue】el-select+el-tree实现下拉树形选择(组件封装)
Gh的博客
10-24 4710
【vue】el-select+el-tree实现下拉树形选择(组件封装)
el-select和el-tree树形结构下拉单选
05-11
可以使用 `el-select` 和 `el-tree` 配合使用来实现树形结构下拉单选。 首先，需要将数据转换为 `el-tree` 的节点格式，例如以下数据： ```javascript const treeData = [ { id: 1, label: '节点1', children: [ { id: 2, label: '节点1-1' }, { id: 3, label: '节点1-2' } ] }, { id: 4, label: '节点2', children: [ { id: 5, label: '节点2-1' }, { id: 6, label: '节点2-2' } ] } ] ``` 需要转换为 `el-tree` 的节点格式： ```javascript const treeNodes = [ { id: 1, label: '节点1', children: [ { id: 2, label: '节点1-1', isLeaf: true }, { id: 3, label: '节点1-2', isLeaf: true } ] }, { id: 4, label: '节点2', children: [ { id: 5, label: '节点2-1', isLeaf: true }, { id: 6, label: '节点2-2', isLeaf: true } ] } ] ``` 其中，每个节点需要添加 `isLeaf` 属性，用于标记该节点是否为叶子节点。 接着，在 `el-select` 中使用 `el-tree` 作为下拉选项。代码示例： ```html <template> <el-select v-model="selectedItem" placeholder="请选择" clearable> <el-tree :data="treeNodes" :props="treeProps" :node-key="treeProps.id" :highlight-current="true" :default-expand-all="true" :expand-on-click-node="false" v-if="treeVisible"></el-tree> <el-option v-else v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </template> <script> export default { data() { return { selectedItem: null, treeNodes: [ { id: 1, label: '节点1', children: [ { id: 2, label: '节点1-1', isLeaf: true }, { id: 3, label: '节点1-2', isLeaf: true } ] }, { id: 4, label: '节点2', children: [ { id: 5, label: '节点2-1', isLeaf: true }, { id: 6, label: '节点2-2', isLeaf: true } ] } ], treeProps: { children: 'children', label: 'label', isLeaf: 'isLeaf' }, options: [ { label: '选项1', value: '1' }, { label: '选项2', value: '2' }, { label: '选项3', value: '3' } ], treeVisible: false } }, watch: { selectedItem(val) { if (val && val.children && val.children.length > 0) { this.treeVisible = true } else { this.treeVisible = false } } } } </script> ``` 上述代码中，`el-select` 的下拉选项分为两部分：`el-tree` 和 `el-option`。根据当前选中的节点是否有子节点，判断显示 `el-tree` 还是 `el-option`。 在 `el-tree` 中，需要设置 `props` 属性，指定节点数据中的属性名，以及 `node-key` 属性，用于标识节点的唯一属性名。其他属性根据实际需求进行设置。 在 `watch` 中，根据当前选中的节点是否有子节点，控制 `el-tree` 的显示与隐藏。 注意：以上代码只实现了树形结构下拉单选的基本功能，还需要根据实际需求进行修改和完善。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值