vue2 - 详细介绍element UI中在el-select嵌套el-tree树形控件实现下拉选择树型结构数据的效果实例（组件封装）

已于 2024-03-04 08:05:20 修改
阅读量1k 收藏 1
点赞数 21
分类专栏： Vue2 文章标签： vue.js javascript elementui
于 2024-03-03 23:23:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49259402/article/details/136440581
版权
本文详细介绍了如何在Vue2项目中，利用Element UI的el-select和el-tree组件，结合自定义代码，实现下拉选择树型结构数据的功能。通过一次性返回的树形数据，当点击最后一层时，动态追加带有勾选框的子项，满足单选并返回选中节点及其父节点的需求。同时，文章提供了具体的代码实现和效果展示。
摘要由CSDN通过智能技术生成

前言

在项目上常用使用到 el-select 和 el-tree 组合实现，记录下两者结合的实现过程。（代码以及注释清晰明了，代码直接使用即可）

要求根据项目接口提供的数据，el-tree 里的数据是一次性返回来的，点击最后一层级时，请求接口，在点击层级下方追加数据追加的数据要显示勾选框，可进行勾选，且是单选勾选后需要返回勾选的层级以及它的父级

实现效果如下

数据回显效果： 

实现关键部分

el-tree里的显示勾选框不符合当前“追加的数据要显示勾选框，可进行勾选”这个需求，所以我修改了el-tree的源码进行使用。

追加子级数据，el-tree 文档提供了这个这个方法，可以追加子级

了解本专栏 订阅专栏 解锁全文 超级会员免费看
前端充电宝
关注
  • 21
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
订阅专栏
基于elementUI实现的selectTree，select组件下拉树形结构选择
qq_16785561的博客
07-09 412
【代码】基于elementUI实现的selectTree，select组件下拉树形结构选择。
el-tree-select:基于el-select和el-tree改造的树形选择器（下拉框）组件
05-10
树选择 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build
基于Element UI内置的Select下拉和Tree树形组件，组合封装的树状下拉选择器
最新发布
WindfallSheng的博客
07-23 1621
基于Element UI内置的Select下拉和Tree树形组件，组合封装的树状下拉选择器
vue el-select下拉框中嵌套树结构
qq_44699269的博客
02-23 780
js部分如下：（直接调接口了）
通过el-select选择器和el-tree树形结构二次封装(vue2+elementUI)，开发element-plus的TreeSelect树形选择器
qq_43217258的博客
03-13 2323
领导看我在另一个vue3项目的el-tree-select挺好的，叫我移入vue2的项目中。 但是vue2版本的elementUI，并没有这个组件，所以只能自己找，找半天找不到和它差不多的，通过网友写的组件改写的
el-select结合el-tree实现树形多选
m0_67841039的博客
10-10 7395
el-select结合el-tree实现树形多选
vue2 el-select 改造成下拉树，支持数据回显
twinkle的博客
04-08 2481
下拉树 就是一个下拉框里面的options里面换成一棵树的形状。本人业务需要一个这样的组件，我也懒得去发布一个组件到npm库，毕竟现在vue3出来了，这个组件只适合vue2 并且是element ui的基础，限制条件有点多。所以在这里做个笔记，有需要的自己copy 代码到自己本地，就行。 效果 下面的底色不要在意哈 使用方式 模板文件 <select-tree :value="test" :options="options" .
element-ui 远程搜索组件el-select在项目中组件化的实现代码
10-15
Element-UI的`el-select`组件是用于创建下拉选择框的，它提供了丰富的功能，包括远程搜索（remote search）。远程搜索在大型数据集或动态获取数据的情况下非常有用，因为它只在用户输入时向服务器请求数据，提高了...
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
在Vue.js框架中，Element-ui库提供了一套丰富的UI组件，其中包括用于创建下拉框的`el-select`组件。在实际开发中，我们可能需要在用户改变选择时获取额外的信息，比如当前行的数据或者自定义的属性。本文将详细介绍...
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
10-14
Element-ui的el-tree组件是Vue.js开发中常用的一个树形控件，它提供了丰富的功能，如懒加载、自定义增删改以及局部刷新等。在本文中，我们将深入探讨如何利用这些特性来实现一个功能完善的树形控件。 首先，让我们...
3.（vue3.x+vite）el-tree组件（数组结构数据转树结构数据）.rar
09-22
在Vue 3.x和Vite的开发环境中，`el-tree`组件是Element Plus库中的一个常用组件，用于展示树形结构的数据。这个压缩包文件"3.（vue3.x+vite）el-tree组件（数组结构数据转树结构数据）.rar"显然包含了一个关于如何将...
在element-ui的el-tree组件中用render函数生成el-button的实例代码
10-17
Element UI是一个基于Vue 2.0的桌面端组件库，其中el-tree组件用于构建树形控件，而render函数则是一个允许开发者使用JavaScript代码直接生成虚拟DOM的方式。本文着重讲解了如何在el-tree组件中利用render函数动态...
【vue】el-select+el-tree实现下拉树形选择(组件封装)
Gh的博客
10-24 4711
【vue】el-select+el-tree实现下拉树形选择(组件封装)
el-select与el-tree结合使用，实现select框下拉使用树形结构选择数据
qingdatiankong的博客
08-09 2469
el-select与el-tree结合使用，实现select框下拉使用树形结构选择数据
Element树型下拉框/vue2树型下拉框/TreeSelect/树型下拉
小谭鸡米花的博客
03-08 7177
今天小谭要给大家分享的是基于element ui 的下拉框和树型控件二次分装的树型下拉框，element plus新增了这一组件，但是对于还在使用vue2的我来说，就很不友好。
el-select和el-tree结合使用-树形结构多选框
热门推荐
s_9527_s的博客
06-16 1万+
el-select和el-tree结合使用-树形结构多选框
el-select嵌套树结构实现多级下拉菜单
m0_58257035的博客
05-10 2653
el-select使用树结构实现多级菜单下拉
vue：下拉树结构，el-select实现
老舍
07-25 3992
vue下拉树结构，el-select实现。
批量修改 vue2 el-select
07-06
在 Vue.js 中，如果你想要批量修改 `el-select` 组件的状态，你需要先获取到这些组件的引用，通常通过 `v-for` 或者动态绑定的方式。假设你有一个包含多个 `el-select` 的数组，你可以按照以下步骤操作： 1. 获取选中的值：首先，在数据模型中为每个 `el-select` 存储对应的值，如 `selectedOptions` 数组，键通常是选项的唯一标识。 ```javascript data() { return { selectedOptions: [], // ...其他数据 } } ``` 2. 遍历元素并更新选择：在需要修改的函数中，遍历这个数组，并使用 Vue 的 `$set` 方法来安全地更新选中值，例如： ```javascript updateSelectValues(newOptions) { this.selectedOptions.forEach((option, index) => { this.$set(this.selectedOptions, index, option); // 更新对应索引的选择 }); } ``` 这里的 `newOptions` 是你想设置的新选择项。 3. 触发改变事件：如果你想触发选中状态的变化，可以调用 `el-select` 的 `change` 事件，或者直接操作 `el-option` 元素。 ```javascript // 调用 change 事件 this.$refs.selects.map(selectEl => selectEl.$el.querySelector('el-option').trigger('change')); // 直接操作 DOM this.$nextTick(() => { this.$refs.selects.forEach(selectEl => { const options = selectEl.$el.querySelectorAll('el-option'); options.forEach(option => { if (option.value === newOptionValue) { option.selected = true; } else { option.selected = false; // 如果不是新选项，则取消选中 } }); }); }); ``` 记得在模板中给每个 `el-select` 组件加上 ref 属性以便引用它们： ```html <template> <div v-for="(select, index) in selects" :key="index"> <el-select :ref="'select_' + index'" v-model="selectedOptions[index]"> <!-- ... --> </el-select> </div> </template> ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值