el-select 结合 el-tree：树形下拉数据
一、单选
<template><div class="selectTree-wapper"><el-selectv-model="selectValue"placeholder="请选择"popper-class="custom-el-select-class"ref="selectRef"clearable@clear="clearHandle"><el-option :label="selectlabel" :value="selectValue"><el-tree:data="treeData":props="defaultProps"node-key="id"highlight-current:check-strictly="true":expand-on-click-node="true"ref="treeRef"@node-click="handleNodeClick"><template #default="{ node, data }"><span :class="{ 'special-node': data.id === selectValue }">{{ node.label }}</span></template></el-tree></el-option></el-select></div>
</template><script>
export default {name: "selectTree",components: {},props: {},data() {return {selectlabel: "", // 选项labelselectValue: "", // 选项valuetreeData: [{id: "1",name: "一级 1",children: [{id: "2",name: "二级 1-1",children: [{id: "3",name: "三级 1-1-1",},],},],},{id: "4",name: "一级 2",children: [{id: "5",name: "二级 2-1",children: [{id: "6",name: "三级 2-1-1",},],},{id: "7",name: "二级 2-2",children: [{id: "8",name: "三级 2-2-1",},],},],},],defaultProps: {children: "children",label: "name",},};},mounted() {},methods: {/*** 点击节点*/handleNodeClick(data) {// 这里的赋值判断逻辑自定义if (data.children && data.children.length) {return false;}// 赋值this.selectValue = data.id;this.selectlabel = data.name;// 收起下拉框;this.$refs.selectRef.blur();// 收起treeif (this.$refs.treeRef) {const nodes = this.$refs.treeRef.store._getAllNodes();nodes.forEach((node) => {node.expanded = false;});}},/*** 清除*/clearHandle() {this.selectValue = "";this.selectlabel = "";},},watch: {},
};
</script><style lang='scss'>
.custom-el-select-class {.el-select-dropdown__list {height: fit-content;max-height: 274px;.el-select-dropdown__item {height: auto;overflow: visible;padding: 0px 10px;}}.el-select-dropdown__item.hover,.el-select-dropdown__item:hover {background-color: #ffffff;}.special-node {color: red;}
}
</style>
二、多选
<template><div class="selectTree-wapper"><el-selectv-model="selectlabel"placeholder="请选择"popper-class="custom-el-select-class"ref="selectRef"multiplecollapse-tagsclearable@clear="clearHanlde"@remove-tag="removeTag"style="width: 300px"><el-option :value="selectValue"><el-tree:data="treeData":props="defaultProps"node-key="id"show-checkbox:check-strictly="false":expand-on-click-node="true"ref="treeRef"@check-change="handleCheckChange"><template #default="{ node, data }"><span :class="{ 'special-node': data.id === selectValue }">{{ node.label }}</span></template></el-tree></el-option></el-select></div>
</template><script>
export default {name: "selectTree",components: {},props: {},data() {return {selectlabel: [], // 选项labelselectValue: [], // 选项valuetreeData: [{id: "1",name: "一级 1",children: [{id: "2",name: "二级 1-1",children: [{id: "3",name: "三级 1-1-1",},],},],},{id: "4",name: "一级 2",children: [{id: "5",name: "二级 2-1",children: [{id: "6",name: "三级 2-1-1",},],},{id: "7",name: "二级 2-2",children: [{id: "8",name: "三级 2-2-1",},],},],},],defaultProps: {children: "children",label: "name",},};},mounted() {},methods: {/*** 选择改变*/handleCheckChange() {// 获取所有选中的节点const selectNodes = this.$refs.treeRef.getCheckedNodes();// 只要叶子节点数据const nodes = selectNodes.filter((node) => !(node.children && node.children.length));this.selectValue = nodes.map((node) => node.id);this.selectlabel = nodes.map((node) => node.name);},/*** 清除*/clearHanlde() {this.selectlabel = [];this.selectValue = [];},/*** 移除*/removeTag(tag) {console.log("tag", tag);// 使用 collapse-tags 后，移除的是第一个this.selectValue.shift();this.$nextTick(() => {this.$refs.treeRef.setCheckedKeys(this.selectValue);});},},watch: {},
};
</script><style lang='scss'>
.custom-el-select-class {.el-select-dropdown__list {height: fit-content;max-height: 274px;.el-select-dropdown__item {height: auto;overflow: visible;padding: 0px 10px;}}.el-select-dropdown__item.hover,.el-select-dropdown__item:hover {background-color: #ffffff;}.special-node {color: red;}
}
</style>
三、单选+懒加载
<template><div class="selectTree-wapper"><el-selectv-model="selectValue"placeholder="请选择"popper-class="custom-el-select-class"><el-option :label="selectlabel" :value="selectValue"><el-tree:props="props":load="loadNode"lazynode-key="id":check-strictly="true":expand-on-click-node="false"@node-click="handleNodeClick"></el-tree></el-option></el-select></div>
</template><script>
export default {name: "selectTree",components: {},props: {},data() {return {selectlabel: "", // 选项labelselectValue: "", // 选项valueprops: {label: "name",children: "children",},};},mounted() {},methods: {/*** 加载节点*/loadNode(node, resolve) {// 第一次请求，默认id为0let id = node.data?.id ? node.data.id : 0;const data = this.getLazyList(id);resolve(data || []);},/*** 请求数据，这里模拟接口返回假数据*/getLazyList(id) {let data = [];if (id !== "3") {data = [{id: "1",name: "节点a",},{id: "2",name: "节点b",},{id: "3",name: "节点c",},];}return data;},/*** 点击节点*/handleNodeClick(data) {this.selectValue = data.id;this.selectlabel = data.name;},},watch: {},
};
</script><style lang='scss'>
.custom-el-select-class {.el-select-dropdown__list {height: fit-content;max-height: 274px;.el-select-dropdown__item {height: auto;overflow: visible;padding: 0px 10px;}}.el-select-dropdown__item.hover,.el-select-dropdown__item:hover {background-color: #ffffff;}
}
</style>
相关文章：
el-select 结合 el-tree：树形下拉数据
一、单选 <template><div class"selectTree-wapper"><el-selectv-model"selectValue"placeholder"请选择"popper-class"custom-el-select-class"ref"selectRef"clearableclear"clearHandle">&…...
GOOSE 协议中MAC配置
在 GOOSE（Generic Object Oriented Substation Event）协议中，主站（Publisher）发送的 MAC 地址不需要与从站（Listener）的 MAC 地址一致，其通信机制与 MAC 地址的匹配逻辑取决于 GOOSE…...
11. CSS从基础样式到盒模型与形状绘制
在前端开发中，CSS（层叠样式表）是控制网页样式和布局的核心技术。整理了关于 CSS 基础样式、文本样式、盒模型以及形状绘制的一些心得。以下是详细的学习笔记。 一、基础样式设置 1. 字体样式 字体样式是网页视觉呈现的重要组成部分…...
】项目整体介绍（含源代码）（一）)
【springcloud学习(dalston.sr1)】项目整体介绍（含源代码）（一）
当前项目是用来记录下以前学习过的springcloud的dalston.sr1版本，该版本目前来看已经过时了，这里仅做下学习记录分享（当前推荐学习spring cloud alibaba）。 springcloud主要用于大型项目，比如有一个电商项目ÿ…...
集成DHTMLX 预订排期调度组件实践指南:如何实现后端数据格式转换
在企业级应用中，预订系统（Booking System）作为典型的调度类应用，广泛用于酒店、会议室、设备预约、医疗排班等业务场景。而DHTMLX Scheduler作为一款功能强大且高度可定制的 JavaScript 日程安排控件，已成为众多开发者…...
ROS多机集群组网通信（四）——Ubuntu 20.04图形化配置 Ad-Hoc组网通信指南
引言 在我之前的文章中已经讲解过Ad-Hoc网络的相关概念，以及如何使用网卡配置Ad-Hoc模式，实现局域网无中心路由通信。这篇文章主要讲解如何在ubuntu20.04上使用图形化配置工具来更方便的配置Ad-Hoc网络，实现组网通信。下面先复习一下之前的相…...
S7-1200 PLC与梅特勒-托利多IND360称重仪表通信
以下是使用西门子进行通信的方法及接线说明，基于常见的工业通信方案（如Modbus RTU或Modbus TCP）。由于IND360通常支持Modbus协议，而S7-1200需通过附加模块或库实现通信，以下分两种场景说明。 一、通信方案选择 Modbus …...
网络安全侦察与漏洞扫描One-Liners
在网络安全领域，侦察（Reconnaissance）和漏洞扫描是发现潜在安全风险的重要步骤。本文整合了一系列高效的命令行工具和脚本，涵盖子域名枚举、漏洞扫描、资产发现和信息提取等技术，旨在为安全研究人员和渗透测试人员提供…...
React Native告别图标体积大手动更换慢的噩梦：让图标更新像修改文字一样简单
写在前面：凌晨三点的图标战争 “所有图标都要换成圆角风格，明天上线！”——产品经理这条消息弹出时，我的保温杯差点从手中滑落。扫了一眼项目中的347个图标文件，我知道今晚又是个不眠夜。但就在绝望之际，同事发来一个GIF：他只是在终端输入了iconfont-rn --update，所有…...
【机器学习赋能的智能光子学器件系统研究与应用】
在人工智能与光子学设计融合的背景下，科研的边界持续扩展，创新成果不断涌现。从理论模型的整合到光学现象的复杂模拟，从数据驱动的探索到光场的智能分析，机器学习正以前所未有的动力推动光子学领域的革新。据调查，目前…...
信奥赛-刷题笔记-队列篇-T2-P1540机器翻译和P2952Cow Line S
总题单 本部分总题单如下 【腾讯文档】副本-CSP-JSNOI 题单 (未完待续) https://docs.qq.com/sheet/DSmJuVXR4RUNVWWhW?tabBB08J2 队列篇题单 P1540 [NOIP 2010 提高组] 机器翻译 https://www.luogu.com.cn/problem/P1540 题目背景 NOIP2010 提高组 T1 题目描述 小晨…...
ESP32C3连接wifi
文章目录 🔧 一、ESP32-C3 连接 Wi-Fi 的基本原理（STA 模式）✅ 二、完整代码 注释讲解（适配 ESP32-C3）📌 三、几个关键点解释🔚 四、小结 🔧 一、ESP32-C3 连接 Wi-Fi 的基本原理&a…...
nvidia驱动更新-先卸载再安装-ubuntu
显卡驱动升级前，卸载旧版本，可采用两种方式。 1.命令行 （1）查找已安装的 NVIDIA 驱动和相关包：dpkg -l | grep nvidia （2）完全卸载 NVIDIA 驱动：sudo apt remove purge nvidia-*…...
SparkSQL 连接 MySQL 并添加新数据：实战指南
SparkSQL 连接 MySQL 并添加新数据：实战指南 在大数据处理中，SparkSQL 作为 Apache Spark 的重要组件，能够方便地与外部数据源进行交互。MySQL 作为广泛使用的关系型数据库，与 SparkSQL 的结合可以充分发挥两者的优势。本文将详细…...
Tomcat与纯 Java Socket 实现远程通信的区别
Servlet 容器（如 Tomcat） 是一个管理 Servlet 生命周期的运行环境，主要功能包括： 协议解析：自动处理 HTTP 请求/响应的底层协议（如报文头解析、状态码生成）； 线程…...
Ubuntu 18.04.6下OpenSSL与OpenSSH版本升级
文章目录 升级背景下载必要软件包安装 zlib创建目录解压文件安装前置依赖离线安装依赖编译安装 zlib 安装 OpenSSL检查当前版本创建安装目录下载并解压 OpenSSL配置与安装验证安装解决动态库依赖问题永久更新环境变量安装OpenSSL常见错误 离线安装 Telnet 服务端指南1. 在联网机…...
BFS算法篇——从晨曦到星辰，BFS算法在多源最短路径问题中的诗意航行（下）
文章目录 引言一、01矩阵1.1 题目链接：https://leetcode.cn/problems/01-matrix/description/1.2 题目分析：1.3 思路讲解：1.4 代码实现： 二、飞地的数量2.1 题目链接：https://leetcode.cn/problems/number-of-enclaves…...
Cold Diffusion: Inverting Arbitrary Image Transforms Without Noise论文阅读
冷扩散：无需噪声的任意图像变换反转 摘要 标准扩散模型通常涉及两个核心步骤：图像降质 （添加高斯噪声）和图像恢复 （去噪操作）。本文发现，扩散模型的生成能力并不强烈依赖于噪声的选择…...
c++进阶——哈希表的实现
文章目录 哈希表的实现unordered_map和unordered_set哈希的引入散列的一些基本概念将Key转成整形和哈希函数哈希冲突负载因子 开放定址法和链地址法哈希函数的选取除法散列法/除留余数法乘法散列法全域散列法(了解)其他方法（了解） 针对于开放定址法的哈希…...
visual studio生成动态库DLL
visual studio生成动态库DLL 创建动态库工程 注意 #include “pch.h” 要放在上面 完成后点击生成 创建一个控制台项目 设置项目附加目录为刚才创建的动态库工程Dll1： 配置附加库目录： 配置动态库的导入库（.lib）：链…...
逆强化学习IRL在医疗行为模式研究中的应用
逆强化学习（Inverse Reinforcement Learning, IRL）通过从专家行为中推断潜在奖励函数，近年来在医疗领域的患者行为模式分析中展现出重要价值。 以下是相关研究的具体分析： 1. 脓毒症治疗策略优化 研究背景：脓毒症治疗依赖复杂的临床决策，但传统强化学习需预先定义奖励…...
niushop单商户V5多门店版V5.5.0全插件+商品称重、商家手机端+搭建环境教程
一.系统介绍 【全开源】niushop单商户V5多门店版V5.5.0版本，我看很多人都想要 商品称重、商家手机端等插件这套是全插件版本，整合起来本博主也花了不少啦~ Niushop系统是应用thinkphp6开发的完善的电商系统，拥有完善的商品机制，…...
Kafka Go客户端--Sarama
Kafka Go客户端 在Go中里面有三个比较有名气的Go客户端。 Sarama:用户数量最多，早期这个项目是在Shopify下面，现在挪到了IBM下。segmentio/kafka-go:没啥大的缺点。confluent-kafka-go：需要启用cgo,跨平台问题比较多，交叉编译也…...
Python打卡 DAY 24
知识点回顾： 1. 元组 2. 可迭代对象 3. os模块 作业：对自己电脑的不同文件夹利用今天学到的知识操作下，理解下os路径。 OS 模块 import os # os是系统内置模块，无需安装 获取当前工作目录 os.getcwd() # get current working…...
为什么hadoop不用Java的序列化？
Java的序列化是一个重量级序列化框架（Serializable），一个对象被序列化后，会附带很多额外的信息（各种校验信息，Header，继承体系等），不便于在网络中高效传输。所以…...
》)
《类和对象(下)》
引言： 书接上回，如果说类和对象（上）是入门阶段，类和对象（中）是中间阶段，那么这次的类和对象（下）就可以当做类和对象的补充及收尾。 一：再探构造…...
基于STM32、HAL库的TLV320AIC3101IRHBR音频接口芯片驱动程序设计
一、简介： TLV320AIC3101IRHBR 是 Texas Instruments 推出的高性能、低功耗音频编解码器，专为便携式和电池供电设备设计。它集成了立体声 ADC、DAC、麦克风前置放大器、耳机放大器和数字信号处理功能，支持 I2S/PCM 音频接口和 I2C 控制接口，非常适合与 STM32 微控制器配合…...
EDR与XDR如何选择适合您的网络安全解决方案
1. 什么是EDR？ 端点检测与响应（EDR） 专注于保护端点设备（如电脑、服务器、移动设备）。通过在端点安装代理软件，EDR实时监控设备活动，检测威胁并快速响应。 EDR核心功能 实时监控：…...
Vue2 elementUI 二次封装命令式表单弹框组件
需求：封装一个表单弹框组件，弹框和表单是两个组件，表单以插槽的形式动态传入弹框组件中。 使用的方式如下： 直接上代码： MyDialog.vue 弹框组件 <template><el-dialog:titletitle:visible.sync"dialo…...
jenkins流水线常规配置教程!
Jenkins流水线是在工作中实现CI/CD常用的工具。以下是一些我在工作和学习中总结出来常用的一些流水线配置：变量需要加双引号括起来 "${main}" 一 引用无账号的凭据 使用变量方式引用，这种方式只适合只由密码，没有用户名的凭证。例…...
设计模式系列（02）：设计原则（一）：SRP、OCP、LSP
本文为设计模式系列第2篇，聚焦面向对象设计的三大核心原则：单一职责、开放封闭、里氏替换，系统梳理定义、实际业务场景、优缺点、最佳实践与常见误区，适合系统学习与团队协作。 目录 1. 引言2. 单一职责原则（SRP）3. 开放封闭原则（OCP）4. 里氏替换原则（LSP）5. 常见误区…...
【日常】AI 工作流
AI 工作流 名称使用场景产品形态其他ChatGPT网页LLMGemini可以生成一份深度研究的文档并保存到Google Docs网页LLM白嫖了一年会员Kimi日常网页LLMDeepSeek深度思考网页LLMGrok3Deep Research 深度搜索网页LLMQwen3网页LLM元宝可免费使用DS的深度思考（满血DS R1版&a…...
问题及解决02-处理后的图像在坐标轴外显示
一、问题 在使用matlab的appdesigner工具来设计界面，可以通过点击处理按钮来处理图像，并将处理后的图像显示在坐标轴上，但是图像超出了指定的坐标轴，即处理后的图像在坐标轴外显示。 问题图如下图所示。 原来的坐标轴如下图所…...
Spark基础介绍
Spark是一种基于内存的快速、通用、可拓展的大数据分析计算引擎。 起源阶段 Spark 最初是在 2009 年由加州大学伯克利分校的 AMP 实验室开发。当时，Hadoop 在大数据处理领域占据主导地位，但 MapReduce 在某些复杂计算场景下，如迭代计算和交互…...
Oracles数据库通过存储过程调用飞书接口推送群组消息
在Oracle数据库中，可以通过存储过程调用外部接口来实现推送消息的功能。以下是一个示例，展示如何通过存储过程调用飞书接口推送群组消息。 创建存储过程 首先，创建一个存储过程，用于调用飞书接口。该存储过程使用UTL_HTTP包来发送HTTP请求。 CREATE OR REPLACE PROCEDUR…...
ubuntu22.04编译PX4无人机仿真实践
克隆PX4源码，并且更新子模块 git clone https://github.com/PX4/PX4-Autopilot.git --recursive git submodule update --init --recursive # 强制同步所有子模块 接着安装相关依赖： bash ./PX4-Autopilot/Tools/setup/ubuntu.sh 运行以下命令进行编译： cd ~/PX4-Autop…...
MySQL基础入门：MySQL简介与环境搭建
引言 在数字化转型浪潮中，MySQL作为数据存储的"基石引擎"，支撑着从电商交易到金融风控的各类核心业务。其高并发处理能力、灵活的架构设计及跨平台兼容性，使其成为开发者技术栈中的"常青树"。本章节将通过历史溯源、技术…...
无人机避障——（运动规划部分）深蓝学院动力学kinodynamic A* 3D算法理论解读（附C++代码）
开源代码链接：GitHub - Perishell/motion-planning 效果展示： ROS 节点展示全局规划和轨迹生成部分： Kinodynamic A*代码主体： int KinoAstar::search(Eigen::Vector3d start_pt, Eigen::Vector3d start_vel,Eigen::Vector3d en…...
电脑声音小怎么调大 查看声音调整方法
电脑是我们工作学习经常需要用到的工具，同时电脑也可以播放音乐、视频、游戏等，享受声音的效果。但是，有些电脑的声音很小，即使把音量调到最大，也听不清楚，这让我们很苦恼。那么，电脑声音小怎么…...
无人机信号监测系统技术解析
一、模块技术要点 1. 天线阵列与信号接收模块 多频段自适应切换：采用天线阵列模块，根据复杂地形和不同频段自动切换合适的天线，提升信号接收灵敏度。 双天线测向技术：通过双天线的RSSI（信号接收强度）差值…...
Excel的详细使用指南
### **一、Excel基础操作** #### **1. 界面与基本概念** - **工作簿（Workbook）**：一个Excel文件（扩展名.xlsx）。 - **工作表（Worksheet）**：工作簿中的单个表格（默认名…...
基于SSM实现的健身房系统功能实现十六
一、前言介绍： 1.1 项目摘要 随着社会的快速发展和人们健康意识的不断提升，健身行业也在迅速扩展。越来越多的人加入到健身行列，健身房的数量也在不断增加。这种趋势使得健身房的管理变得越来越复杂，传统的手工或部分自动化的管…...
序列化和反序列化（hadoop）
1.先将上一个博客的Student复制粘贴后面加上H 在StudentH中敲下面代码 package com.example.sei; import org.apache.hadoop.io.Writable; import java.io.DataInput; import java.io.DataOutput; import java.io.IOException; //学生类，姓名，年龄 //支…...
大模型MCP_MCP从流式SSE到流式HTTP_1.8.0支持流式HTTP交互_介绍_从应用到最优--人工智能工作笔记0245
从最开始的大模型时代,到现在MCP,大模型技术,人工智能技术迭代真的非常快 之前的大模型更像一个大脑,能帮大家出点子,然后告诉你思路,你去解决问题,但是 一直不能自己解决问题,后来出来了通用的manus智能体,声称可以解决很多问题.直接操作 一个自带的电脑,但是也有局限性,还…...
docker大镜像优化实战
在 Docker 镜像优化方面，有许多实战技巧可以显著减小镜像体积、提高构建效率和运行时性能。以下是一些实用的优化策略和具体操作方法： 1. 选择合适的基础镜像 策略 使用 Alpine 版本：Alpine 镜像通常只有 5-10MB，比 Ubuntu/Deb…...
【25软考网工】第六章（5）应用层安全协议
博客主页：christine-rr-CSDN博客 专栏主页：软考中级网络工程师笔记 大家好，我是christine-rr !目前《软考中级网络工程师》专栏已经更新三十篇文章了，每篇笔记都包含详细的知识点，希望能帮助到你ÿ…...
RevIN（Reversible Instance Normalization）及其在时间序列中的应用
详细介绍 RevIN（Reversible Instance Normalization）及其在时间序列中的应用 1. RevIN 的定义与背景 RevIN（可逆实例归一化）是一种专门为时间序列预测设计的归一化方法，旨在处理非平稳数据（non-stationar…...
JSON 和 cJSON 库入门教程
第一部分：了解 JSON (JavaScript Object Notation) 什么是 JSON？ JSON 是一种轻量级的数据交换格式。它易于人阅读和编写，同时也易于机器解析和生成。 JSON 基于 JavaScript 编程语言的一个子集，但它是一种独立于语言的文本格式…...
Unity 2D 行走动画示例工程手动构建教程-AI变成配额前端UI-完美游戏开发流程
🎮 Unity 2D 行走动画示例工程手动构建教程 ✅ 1. 新建 Unity 项目 打开 Unity Hub： 创建一个新项目，模板选择：2D Core项目名：WalkAnimationDemo ✅ 2. 创建文件夹结构 在 Assets/ 目录下新建以下文件夹：…...
[Java][Leetcode middle] 45. 跳跃游戏 II
这题没做出来，看的答案解析 可以理解为希望采用最少得跳槽次数跳到最高级别的公司。 下标i为公司本身的职级，每个公司可以提供本身等级nums[i]的职级提升。 每次从这些选择中选择自己能够达到最大职级的公司跳槽。 public int jump(int[] nums) {if(nu…...