element-ui 中el-select 加 tree树形控件组合使用

最新推荐文章于 2025-05-15 09:00:01 发布
最新推荐文章于 2025-05-15 09:00:01 发布
阅读量3.6k 收藏 22
点赞数 4
CC 4.0 BY-SA版权
文章标签： vue js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/demo_020/article/details/112196118
本文介绍了如何在Vue项目中将Element-UI的el-select下拉框与tree树形控件组合使用，以满足下拉框内选项可拆叠的需求。通过结合官网提供的组件并参考网络上的方法，实现了最终效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

项目中要求一个下拉框里面的选项可以拆叠。在element-ui官网里找了两个组件很符合我的需求。
在这里插入图片描述
在这里插入图片描述
关键是怎么把他们组合在一起。下面是我从网上查到的方法。

<el-select v-model="mineStatus" placeholder="请选择" multiple @change="selectChange" style="width:30%;">
      <el-option  :value="mineStatusValue" style="height: auto">
       	<el-tree :data="data" show-checkbox node-key="id" ref="tree" highlight-current :props="defaultProps" @check-change="handleCheckChange"></el-tree>
	  </el-option>
  </el-select>

js部分

<script>
export default {
最低0.47元/天 解锁文章
小新_020
关注
vue2 - 详细介绍element UI中在el-select嵌套el-tree树形控件实现下拉选择树型结构数据的效果实例（组件封装）
前端充电宝
03-03 1501
element UI中在el-select嵌套el-tree树形控件实现下拉选择树型结构数据的效果实例
Element-UI封装El-Select-Tree组件(树形下拉选择器)
Sunny_boy
05-17 2482
封装Select-Tree组件
elementUI，实现el-select + el-tree组合成下拉树。
weixin_38395200的博客
05-20 5278
elementUI 官网API elementUI 中有Select 选择器，效果是这样的。 Tree 树形控件的效果是这样的。 我们在实际开发中需要用到下拉树，elementUI 是没有这个组件的，我们就要自己去写了。下面是我开发中用到的，记录一下el-select + el-tree组合，直接贴代码。 <el-select v-model="baseTableName" class="select-unitName select-option-father" popper-class="se
elementui之el-select和el-tree的合并使用
牛先森家的博客
11-25 3636
elementui之el-select和el-tree的合并使用elementui之el-select和el-tree的合并使用 elementui之el-select和el-tree的合并使用 效果图如下： <template> <div class="content-box"> <div class="container"> <el-select v-model="selectTree" placeho
el-select-tree：ElementUI下拉树状选择器
最新发布
gitblog_00716的博客
05-15 343
el-select-tree：ElementUI下拉树状选择器 el-select-tree ElementUI's el-select combined with el-tree. 项目地址: https://gitcode.c...
组合element里面的select和tree实现的treeSelect选择器
08-09
SelectTree是组合element里面的select和tree两者实现的，可以实现多选，单选，同时选中以后关闭下拉框等操作
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 } } ; 完
element-ui 的 el-select 与 el-tree 的功能组合
YuJinpan的博客
11-04 9867
文章目录简介使用安装对 element-ui 的依赖全局注册局部注册完整的实例组件 API属性事件 简介 element-ui 的 el-select 与 el-tree 组件的功能组合。 在线实例：https://yujinpan.github.io/el-select-tree/ 使用 安装 npm install --save el-select-tree 对 element-ui 的...
在element-ui的el-tree组件中用render函数生成el-button的实例代码
10-17
Element UI是一个基于Vue 2.0的桌面端组件库，其中el-tree组件用于构建树形控件，而render函数则是一个允许开发者使用JavaScript代码直接生成虚拟DOM的方式。本文着重讲解了如何在el-tree组件中利用render函数动态...
基于element-ui封装可搜索的懒加载tree组件的实现
10-15
- 尝试使用Element-UI的el-tree组件自带的懒加载方式，但发现存在问题，不能直接展开节点。 - 经过思考，决定采用非懒加载形式，手动控制数据加载时机。 3. **数据格式处理**： - 定义树节点数据格式，每个节点...
Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
10-14
在这个组件中，`<el-tree>`是Element UI提供的树形控件，`data`属性接收树形结构数据，`node-key`用于唯一标识每个节点，`size`控制节点的大小，`highlight-current`高亮当前选中节点，`check-on-click-node`则在...
element-plus 树形控件结合下拉列表
m0_73481765的博客
08-09 1520
要将Element Plus的Tree控件与下拉列表结合起来，可以使用Element Plus的Select控件和Tree控件的插槽来实现。在这个方法中，可以处理树形控件节点的点击事件，例如更新选中的选项等操作。属性设置为false，表示需要手动展开节点；事件用来处理树形控件节点的点击事件。插槽来添加树形控件。在每一个Option中，使用。是下拉列表的选项数据，最后，需要在代码中添加。作为树形控件的数据，
el-tree-select:基于el-select和el-tree改造的树形选择器（下拉框）组件
05-10
树选择 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build
【vue】使用element的select选择器结合Tree树形控件实现下拉树效果
weixin_49035434的博客
10-19 2627
<template> <div id="app"> <!-- // 点击清空的实现 --> <el-select v-model="saveForm.upResId" clearable placeholder="请选择" @clear="handleClear" ref="selectUpResId" > <!-- // 设置一个隐藏...
Vue中用element-ui封装的el-tree和el-select实现下拉树状多选，灵活自定义模糊查询、单选多选，默认选中值。
m0_49515138的博客
09-14 1823
<el-select v-model="selectAjlbMc" class="ajlbselect" ref="checkCaseType" :clearable="true" :multiple="true" placeholder="请选择" style="width:100%;" @clear="clearSelect" @remove-tag="clearSelect"> <el-input .
el-select-tree：可搜索下拉选择树
cxk_ctrl的博客
02-04 2365
el-select-tree：可搜索下拉选择树。
element-ui 中el-select 嵌套 tree树形控件
热门推荐
暴躁小码农的博客
06-05 3万+
element-ui 中el-select 嵌套 tree树形控件 最近项目中要求要有一个下拉框，里面的选项可以折叠并且多选 我第一反应用Cascader 级联选择器不就好啦，多简单啊 但是，他要求不要在右边展开子选项 只能下拉展开 这个时候我就想起用select，嵌套tree控件 不是就刚好满足了要求嘛 <el-select v-model="mineStatus" placehold...
el-select和el-tree结合使用-树形结构多选框
s_9527_s的博客
06-16 1万+
el-select和el-tree结合使用-树形结构多选框
el-select+el-tree实现树形选择器
qq_44805000的博客
12-22 1107
看别人写的select+tree实现树形选择器比较奇葩，具体实现是将整个tree放入一个select-item，需要自己写交互逻辑，很麻烦，所以自己使用tree的slot写入item。
使用el-select 嵌套 tree 树形控件
09-21
要使用el-select嵌套tree树形控件，您可以使用Element UI提供的el-cascader组件来实现。el-cascader是一个级联选择器，可以将树形结构的数据展示为多级选择框。您可以通过配置el-cascader的options属性来设置树形数据源，然后根据需要设置其他属性，例如placeholder、value、clearable等。使用el-cascader的时候，可以通过设置show-all-levels属性为true来显示所有层级的选项。 以下是一个使用el-select嵌套tree树形控件的示例代码： ``` <template> <el-cascader v-model="selectedOptions" :options="treeData" show-all-levels clearable placeholder="请选择" ></el-cascader> </template> <script> export default { data() { return { selectedOptions: [], // 选中的选项 treeData: [ // 树形数据 { value: '1', label: '选项1', children: [ { value: '11', label: '选项1-1', children: [ { value: '111', label: '选项1-1-1', }, { value: '112', label: '选项1-1-2', }, ], }, { value: '12', label: '选项1-2', }, ], }, { value: '2', label: '选项2', }, ], }; }, }; </script> ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值