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

news2024/11/15 15:50:33

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/855682.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于 JMeter API 开发性能测试平台

目录 背景&#xff1a; 常用的 JMeter 类和功能的解释&#xff1a; JMeter 编写性能测试脚本的大致流程示意图&#xff1a; 源码实现方式&#xff1a; (1) 环境初始化 (2) 环境初始化 (3) 创建测试计划 (4) 创建 ThreadGroup (5) 创建循环控制器 (6) 创建 Sampler (…

ArcGIS Pro暨基础入门、制图、空间分析、影像分析、三维建模、空间统计分析与建模、python融合、案例应用

GIS是利用电子计算机及其外部设备&#xff0c;采集、存储、分析和描述整个或部分地球表面与空间信息系统。简单地讲&#xff0c;它是在一定的地域内&#xff0c;将地理空间信息和 一些与该地域地理信息相关的属性信息结合起来&#xff0c;达到对地理和属性信息的综合管理。GIS的…

数据挖掘具体步骤

数据挖掘具体步骤 1、理解业务与数据 2、准备数据 数据清洗&#xff1a; 缺失值处理&#xff1a; 异常值: 数据标准化&#xff1a; 特征选择&#xff1a; 数据采样处理&#xff1a; 3、数据建模 分类问题&#xff1a; 聚类问题&#xff1a; 回归问题 关联分析 集成学习 image B…

linux - 用户权限

认知root用户 无论是Windows、Macos、Linux均采用多用户的管理模式进行权限管理 在Linux系统中,拥有最大权限的账户名为: root(超级管理员) root用户拥有最大的系统操作权限&#xff0c;而普通用户在许多地方的权限是受限的。普通用户的权限&#xff0c;一般在其HOME目录内是不…

Simulation 线性静力分析流程

有限元仿真分析软件有很多&#xff0c;但是分析的流程却是大同小异&#xff0c;今天给大家分享的是Simulation的线性静力分析流程。 1.构思分析方案。 确定研究对象&#xff0c;研究的方法、验证方案等等。听起来比较空洞&#xff0c;实践过程中我建议首先需要把目标和有限元分…

24届近5年东南大学自动化考研院校分析

今天给大家带来的是东南大学控制考研分析 满满干货&#xff5e;还不快快点赞收藏 一、东南大学 学校简介 东南大学是我国最早建立的高等学府之一&#xff0c;素有“学府圣地”和“东南学府第一流”之美誉。东南大学前身是创建于1902年的三江师范学堂。1921年经近代著名教育家…

软件测试的49种方法

1. α测试_Alpha测试 α测试&#xff0c;英文是Alpha testing。又称Alpha测试。 Alpha测试是由一个用户在开发环境下进行的测试&#xff0c;也可以是公司内部的用户在模拟实际操作环境下进行的受控测试&#xff0c;Alpha测试不能由该系统的程序员或测试员完成。 在系统开发接近…

【BASH】回顾与知识点梳理(十四)

【BASH】回顾与知识点梳理 十四 十四. 文件与目录的默认权限与隐藏权限14.1 文件预设权限&#xff1a;umaskumask 的利用与重要性&#xff1a;专题制作 14.2 文件隐藏属性chattr (配置文件案隐藏属性)lsattr (显示文件隐藏属性) 14.3 文件特殊权限&#xff1a; SUID, SGID, SBI…

短视频内容平台(如TikTok、Instagram Reel、YouTube Shorts)的系统设计

现在&#xff0c;短视频内容已成为新趋势&#xff0c;每个人都在从TikTok、Instagram、YouTube等平台上消费这些内容。让我们看看如何为TikTok创建一个系统。 这样的应用程序看起来很小&#xff0c;但在后台有很多事情正在进行。以下是相关的挑战&#xff1a; •由于该应用程序…

【Linux命令行与Shell脚本编程】第十八章 文本处理与编辑器基础

Linux命令行与Shell脚本编程 第十八章 文本处理与编辑器基础 文章目录 Linux命令行与Shell脚本编程第十八章 文本处理与编辑器基础 文本处理与编辑器基础8.1.文本处理8.1.1.sed编辑器8.1.1.1.在命令行中定义编辑器命令8.1.1.2.在命令行中使用多个编辑器命令8.1.1.3.从文件中读…

项目8.9总结

这两天写了评论和用户之间的关注&#xff0c;然后就是歌曲的上传&#xff0c;歌曲的上传很简陋&#xff0c;并且还有点问题 关注 歌曲上传

[Vue] Vue2和Vue3的生命周期函数

vue2有11个生命周期钩子, vue3有8个生命周期钩子 从vue创建、运行、到销毁总是伴随着各种事件, 创建、挂载、更新到销毁。 1.vue2系列生命周期 ⑴【beforecreate】实例创建前。 vue完全创建之前&#xff0c;会自动执行这个函数。 ⑵【Created】实例创建后。 这也是个生命…

OKHTTP缓存问题记录

使用okhttp的缓存功能 okhttp有一个功能就是适配http协议里面cache-control头 但是在实际使用的过程中&#xff0c;发现非文本内容&#xff0c;如果不对Response中的inputstream读取&#xff0c;就不会缓存下来 比如使用如下代码读取后才能缓存到cache目录 ResponseBody bod…

冷链冷藏仓储系统解决方案|海格里斯HEGERLS四向穿梭立体库助力冷链物流新模式

随着现代物流产业的迅速发展&#xff0c;四向穿梭车立体库因其在仓储体系中所具有的高效密集存储功能优势、运作成本优势与系统化智能化管理优势&#xff0c;已经成为自动化立体库的主流形式之一。而随着国内外仓储物流整体规模和低温产品消费需求的稳步增长&#xff0c;冷链市…

关于使用pycharm遇到只能使用unittest方式运行,无法直接选择Run

相信大家可能都遇到过这个问题&#xff0c;使用pycharm直接运行脚本的时候&#xff0c;只能选择unittest的方式&#xff0c;能愁死个人 经过几次各种尝试无果之后&#xff0c;博主就放弃死磕了&#xff0c;原谅博主是个菜鸟 后来遇到这样的问题&#xff0c;往往也就直接使用cm…

【ChatGPT 指令大全】销售怎么借力ChatGPT提高效率

目录 销售演说 电话销售 产出潜在客户清单 销售领域计划 销售培训计划 总结 随着人工智能技术的不断进步&#xff0c;我们现在有机会利用ChatGPT这样的智能助手来改进我们的销售工作。在接下来的时间里&#xff0c;我将为大家介绍如何运用ChatGPT提高销售效率并取得更好的…

SuperMap GIS基础产品WebGIS FAQ集锦(5)

SuperMap GIS基础产品WebGIS FAQ集锦&#xff08;5&#xff09; 【iClient】iClient for Classic如何设置服务跨域时&#xff0c;请求json而不是jsonp&#xff1f; 【解决办法】可全局修改SuperMap.Util.isInTheSameDomain方法&#xff0c;使其返回为true&#xff1b;例如&…

UGUI组件EventTrigger用法

一.Unity编辑器中EventTrigger组件用法 1.添加事件类型 2.绑定gameObject指定组件的方法 3.方法执行逻辑 public class NewBehaviourScript : MonoBehaviour {public void PointerDown(){Debug.Log("Trigger PointerDown");} } 4.按下鼠标&#xff0c;绑定方法成功…

一文了解Java序列化和反序列化:对象的存储与传输

一文了解Java序列化和反序列化&#xff1a;对象的存储与传输 作者&#xff1a;Stevedash 发布时间&#xff1a;2023年8月9日 21点30分 前言 Java序列化是一项强大而重要的技术&#xff0c;它允许我们将对象转换为字节流&#xff0c;以便在存储、传输和重建时使用。在本文中&…

python爬虫相关

目录 初识爬虫 爬虫分类 网络爬虫原理 爬虫基本工作流程 搜索引擎获取新网站的url robots.txt HTHP协议 Resquests模块 前言&#xff1a; 安装 普通请求 会话请求 response的常用方法 简单案例 aiohttp模块 使用前安装模块 具体案例 数据解析 re解析 bs4…