Element UI-Select选择器结合树形控件终极版
Element UI Select选择器控件结合树形控件实现单选和多选，并且通过v-model的方式实现节点的双向绑定，封装成vue组件，文件名为electricity-meter-tree.vue，其代码如下：
<template><div><el-select:value="selectedId":multiple="multiple"placeholder="请选择"ref="selectTree"clearable@change="handleChange"@clear="handleClear"><el-option v-for="form in hiddenForm" :key="form.id" :value="form.id" :label="form.label" hidden/><div style="padding: 10px 14px"><el-input placeholder="输入关键字进行过滤" v-model="filterText" clearable><template #suffix><el-button type="text" icon="el-icon-search" style="max-width: 22px"><i class="el-icon-search" style="display: none;"></i></el-button></template></el-input><el-treev-loading="loading":data="treeData"ref="tree":props="defaultProps"node-key="id"accordiondefault-expand-all:filter-node-method="filterNode":show-checkbox="multiple":check-strictly="checkStrictly":highlight-current="highLightCurrent"@check-change="handleCheckChange"@node-click="handleNodeClick"><!-- 来源于省的电表以蓝色底标识。--><template v-slot="{ node, data }"><span v-if="data.sources === 'province'" style="background: #1890ff;color: #FFFFFF;padding: 2px;">{{ node.label}}</span><span v-else>{{ node.label}}</span></template></el-tree></div></el-select></div>
</template><script>export default {model: {prop: 'value',event: 'change'},props: {value: {type: [Object, Array], // 根据实际情况选择类型default: () => {} // 格式：{id: 'xx', label: 'xx'}或者[{id: 'xx', label: 'xx'}]},multiple: { // 是否多选type: Boolean,default: false},checkStrictly: { // 父子是否不互相关联type: Boolean,default: false},},watch: {value: {handler (val) {if (this.multiple) {if (val && val.length > 0) {this.hiddenForm = val;this.selected = val;}else {this.hiddenForm = [{id: '', label: ''}];this.selected = [];}} else {if (val) {this.selected = val;this.hiddenForm = [val];}else {this.hiddenForm = [{id: '', label: ''}];this.selected = null;}}},immediate: true,deep: true},filterText(val) {this.$refs.tree.filter(val);}},computed: {selectedId () {if (this.multiple) {return this.selected && this.selected.length > 0 ? this.selected.map(item => item.id) : [];}return this.selected? this.selected.id : '';},},data () {return {filterText: '',treeData: [],defaultProps: {children: 'children',label: 'label',id: 'id',disabled: 'disabled'},selected: [],// 格式：{} 或者 []hiddenForm: [{id: '',label: ''},],highLightCurrent: true,loading: false,}},methods: {filterNode(value, data) {if (!value) return true;return data.label.indexOf(value) !== -1;},handleCheckChange (data, checked) {if (this.multiple) { // 多选const nodes = this.$refs.tree.getCheckedNodes();this.hiddenForm = nodes.length > 0 ? nodes : [{id: '', label: ''}];// 保证重现加载数据时，已选中的数据不被清除if (checked) {if (!this.selected || this.selected.length === 0) {this.selected = nodes;}else {// 定义一个函数来去重function removeDuplicates(array, uniqueKey) {let seen = new Map(); // 使用 Map 来存储已见过的 id 和对应对象// 遍历数组中的每个对象for (let obj of array) {// 如果 Map 中还没有这个 id，就添加进去if (!seen.has(obj[uniqueKey])) {seen.set(obj[uniqueKey], obj); // 使用 id 作为 key，对象作为 value}}// 从 Map 中提取所有对象组成新的数组返回return Array.from(seen.values());}this.selected = removeDuplicates([...this.selected, ...nodes], 'id');}}else {this.selected = this.selected?.filter(item => item.id !== data.id);}this.$emit('change', this.selected);} else {}},handleNodeClick (data, node) {if (data.disabled) return;if (this.multiple) {} else { // 单选this.hiddenForm = [{id: data.id,label: data.label}]this.selected = data;this.$emit('change', data);// 使 input 失去焦点，并隐藏下拉框// node.isLeaf && this.$refs.selectTree.blur();}},handleChange (value) {if (!value) return;this.selected = this.selected?.filter(item => value.includes(item.id));this.$emit('change', this.selected);this.multiple && this.$refs.tree.setCheckedKeys(this.selectedId);},handleClear () {this.selected = [];this.multiple && this.$refs.tree.setCheckedKeys([]);this.hiddenForm = [{id: '',label: ''}];this.highLightCurrent = false;this.$emit('change', this.multiple ? [] : null);},getTreeDataAsync() {// 这里模拟调用后端接口返回的数据this.treeData = [{id: '1',label: 'XX市智能电表',children: [{id: '1-1',label: '通用智能电表A',children: [{id: '1-1-1',label: '通用智能电表B',sources: 'province',},{id: '1-1-2',label: '通用智能电表C',},]},{id: '1-2',label: '智能电表01',children: [{id: '1-2-1',label: '智能电表02',sources: 'province',}]},]}];}},created() {this.getTreeDataAsync();},
}
</script><style scoped>
</style>
该组件的用法如下：
<electricity-meter-tree v-model="electricityMeter" multiple checkStrictly @change="electricityMeterChange"/>
- 引入组件：electricity-meter-tree
- 如果multiple为true多选时，那么electricityMeter的结构为[{id: ‘xx’, label: ‘xx’}]，如果 mutilple为false单选时,那么electricityMeter的结构为{id: ‘xx’, label: ‘xx’}
- checkStrictly是否父子不互相关联，前提是multiple为true
- change事件也可以获取选中的节点
效果如下：
相关文章：
Element UI-Select选择器结合树形控件终极版
Element UI Select选择器控件结合树形控件实现单选和多选，并且通过v-model的方式实现节点的双向绑定，封装成vue组件，文件名为electricity-meter-tree.vue，其代码如下： <template><div><el-select:valu…...
粒子群优化算法（Particle Swarm Optimization, PSO）的详细讲解
一、粒子群算法（PSO）基本概念 1. 算法来源 灵感：模拟鸟群或鱼群在觅食过程中的群体协作行为。核心思想：通过个体历史最佳位置和群体全局最佳位置引导搜索方向。2. 与遗传算法的区别 特性PSOGA启发式来源群体协作（鸟类或鱼类行为）生物进化（自然选择、基因重组）解空间搜…...
小菜鸟系统学习Python-迭代实现斐波那契和汉诺塔问题
斐波那契: def fbnq(n):n1 1n2 1n3 1if n<1:print(输入错误,应该大于1)return -1while (n-2)>0:n3 n2 n1n1 n2n2 n3n-1return n3a fbnq(10) print(共有%d个兔子%a)汉诺塔: def hnt(n,x,y,z):if n1:print(x,->,z)else:hnt(n-1,x,z,y)#将前n-1个从x移到y上pri…...
轻松部署 Stable Diffusion WebUI 并实现局域网共享访问：解决 Conda Python 版本不为 3.10.6 的难题
这篇博文主要为大家讲解关于sd webui的部署问题，大家有什么不懂的可以随时问我，如果没有及时回复，可联系：1198965922 如果后续大家需要了解怎么用代码调用部署好的webui的接口，可以在评论区留言哦，博主可以…...
unity文字转语音usherpa-onnx-tts
usherpa-onnx-tts 语音识别（语音转文本、ASR） https://github.com/k2-fsa/sherpa-onnx/releases/tag/asr-models 文本到语音转换 （TTS） https://github.com/k2-fsa/sherpa-onnx/releases/tag/tts-models VAD系列 https://git…...
STM32---FreeRTOS时间片调度实验
一、简介 时间片调度：同等优先级任务轮流地享有相同的CPU时间（可设置），叫时间片，在FreeRTOS中，一个时间片就等于SysTick中断周期； 二、实验 实验设计： 把滴答定时器中断频率设置为…...
探秘 C 语言：编程世界的基石与传奇
一、C 语言的前世今生 C 语言诞生于 20 世纪 70 年代，由贝尔实验室的丹尼斯・里奇（Dennis Ritchie）开发。它最初是为了配合 UNIX 操作系统的开发，旨在提供一种高效、灵活且可移植的编程语言。在那个硬件资源有限的年代࿰…...
MySQL查询语句完全指南：从基础到高阶实战
一、开篇：为什么选择MySQL查询作为切入点？ 根据Stack Overflow 2023开发者调查，MySQL以51.1%的使用率蝉联最受欢迎数据库榜首。其查询语句作为数据操作的基石，支撑着全球数百万应用的日常运转。本指南将通过2000字详解和30个实战…...
AJAX 数据库
AJAX 数据库 引言 随着互联网技术的飞速发展，前端与后端之间的交互需求日益增长。AJAX（Asynchronous JavaScript and XML）作为一种强大的技术，在实现这种交互中发挥着关键作用。本文将深入探讨AJAX技术与数据库的融合，分析其在现代Web开发中的应用及其优势。 AJAX简介 …...
正则表达式梳理（基于python）
正则表达式（regular expression）是一种针对字符串匹配查找所定义的规则模式，独立于语言，但不同语言在实现上也会存在一些细微差别，下面基于python对常用的相关内容进行梳理。 文章目录 一、通用常识1.通配符ps.反义 2.…...
Python项目-基于深度学习的校园人脸识别考勤系统
引言 随着人工智能技术的快速发展，深度学习在计算机视觉领域的应用日益广泛。人脸识别作为其中的一个重要分支，已经在安防、金融、教育等多个领域展现出巨大的应用价值。本文将详细介绍如何使用Python和深度学习技术构建一个校园人脸识别考勤系统&#…...
在PyCharm开发环境中，如何建立hello.py文件？
李升伟 整理 一、分析 首先，用户可能是刚接触PyCharm或者Python的新手，所以需要从打开软件开始讲起。不过用户可能已经安装好了PyCharm，但也许需要确认是否已经正确安装。不过问题重点在创建文件，可能不需要深入安装步骤。 接下…...
常见的网络协议介绍
一、什么是网络协议 指的是通信双方的数据发送和接收顺序，数据的封装规则。 通俗解释：描述双方发送和接收的每个字节是按照什么规则。 二、TCP/IP体系的常用协议 (一)应用层 HTTP：超文本协议；指的是用来传输文本网页的协议&#…...
【折线图 Line】——12
🌟 解锁数据可视化的魔法钥匙 —— pyecharts实战指南 🌟 在这个数据为王的时代，每一次点击、每一次交易、每一份报告背后都隐藏着无尽的故事与洞察。但你是否曾苦恼于如何将这些冰冷的数据转化为直观、吸引人的视觉盛宴？ 🔥 欢迎来到《pyecharts图形绘制大师班》 �…...
沃丰科技结合DeepSeek大模型技术落地与应用前后效果对比
技术突破：DeepSeek算法创新，显著降低了显存占用和推理成本。仅需少量标注数据即可提升推理能力。这种突破减少了对海量数据的依赖，削弱了数据垄断企业的优势！ 商业模式颠覆：DeepSeek选择完全开源模式，迫使…...
基于opencv和dlib的人脸识别定位
cv2 cv2是OpenCV库中的一个模块，OpenCV的Python绑定库。 图像处理功能，还集成了一些高级的计算机视觉算法。 cv2.rectangle 图像上绘制矩形，cv2.rectangle(Numpy图片, 左上坐标, 右下坐标, color, thickness粗度) cv2.cvtColor…...
力扣-字符串
字符串不能被修改，所以如果有想修改字符串的行为，需要转换为StringBuilder StringBuilder里也有很多封装方法String没有，比如reverse() StringBuilder sb new StringBuilder();// 添加字符串 sb.append("Hello"); sb.append(&qu…...
Non-Homophilic Graph Pre-Training and Prompt Learning
Non-Homophilic Graph Pre-Training and Prompt Learning KDD25 #paper/⭐# 目的：对异配图进行prompt 方法 邻居节点的综合嵌入 s v 1 ∣ V ( S v ) ∣ ∑ u ∈ V ( S v ) h u ⋅ s i m ( h u , h v ) , \mathbf{s}_{v}\frac{1}{|V(S_{v})|}\su…...
利用golang embed特性嵌入前端资源问题解决
embed嵌入前端资源，配置前端路由的代码如下 func StartHttpService(port string, assetsFs embed.FS) error {//r : gin.Default()gin.SetMode(gin.ReleaseMode)r : gin.New()r.Use(CORSMiddleware())// 静态文件服务dist, err : fs.Sub(assetsFs, "assets/di…...
10分钟从零开始搭建机器人管理系统（飞算AI）
1. 安装插件 https://www.feisuanyz.com/ 2. Intellij IDEA中运行 创建一个BS架构的机器人远程操控系统，具备机器人状态及位置实时更新，可以实现机器人远程遥控，可以对机器人工作日志进行统计分析，以及其它管理系统的常用功能3…...
转换)
C# Enumerable类 之 数据(类型)转换
总目录 前言 在 C# 中，System.Linq.Enumerable 类是 LINQ（Language Integrated Query）的核心组成部分，它提供了一系列静态方法，用于操作实现了 IEnumerable 接口的集合。通过这些方法，我们可以轻松地对集合…...
MariaDB Galera 原理及用例说明
一、底层原理 MariaDB Galera 集群是一种基于同步多主架构的高可用数据库解决方案，适合需要高并发、低延迟和数据强一致性的场景。以下是部署和配置 MariaDB Galera 集群的简明步骤： 1. 环境准备 节点要求：至少 3 个节点（奇数节点…...
HMC7043和HMC7044芯片配置使用
一，HMC7043芯片 MC7043独特的特性是对14个通道分别进行独立灵活的相位管理。所有14个通道均支持频率和相位调整。这些输出还可针对50 Ω或100 Ω内部和外部端接选项进行编程。HMC7043器件具有RF SYNC功能，支持确定性同步多个HMC7043器件，即确保所有时钟输出从同一时钟沿开始…...
Spring Boot 3.0核心特性解读
1.1 JDK 17 LTS支持（实测性能提升） 记录类（Record）与Spring Data JPA完美适配模式匹配简化类型判断密封类（Sealed Class）增强DTO安全性 // 使用Record优化DTOpublic record UserDTO(NotBlank String usern…...
在Qt中使用QFont设置字体样式
在Qt中使用QFont设置字体样式的步骤如下： 1. 创建QFont对象 QFont font;2. 设置字体属性 字体家族：使用setFamily()方法，建议提供备选字体。 font.setFamily("Arial, sans-serif"); // 备选通用字体字体大小： 点大小&…...
Linux网络_应用层自定义协议与序列化_守护进程
一.协议 协议是一种 "约定". socket api 的接口, 在读写数据时, 都是按 "字符串" 的方式来发送接 收的. 如果我们要传输一些 "结构化的数据" 怎么办呢? 其实，协议就是双方约定好的结构化的数据 像下面，两端都知道数据结构…...
c++领域展开第十五幕——STL（String类的模拟实现）超详细！！！！
文章目录 前言string类的模拟实现string类——迭代器的模拟string类——默认成员函数string类——常用函数接口string类——输入输出重载 总结 前言 上篇博客已经简单的介绍了string类的一些接口，并且做了一些了解 同时也刷了一些oj题目，熟练使用一些str…...
解锁Egg.js：从Node.js小白到Web开发高手的进阶之路
一、Egg.js 是什么 在当今的 Web 开发领域，Node.js 凭借其事件驱动、非阻塞 I/O 的模型，在构建高性能、可扩展的网络应用方面展现出独特的优势 ，受到了广大开发者的青睐。它让 JavaScript 不仅局限于前端，还能在服务器端大展身手&…...
-E卷D卷-100分)
2024华为OD机试真题-螺旋数字矩阵-(C++)-E卷D卷-100分
2024华为OD机试题库-(E卷+C卷+D卷)-(JAVA、Python、C++) 目录 题目描述 输入描述 输出描述 用例1 用例2 用例3 考点 解题思路 代码 c++ 题目描述 疫情期间，小明隔离在家，百无聊赖，在纸上写数字玩。他发明了一种写法： 给出数字个数 n （0 < n ≤ 999）和行数 …...
记录若依分离版脚手架升级 springboot 3.X版本 中的报错 以及集成mybatis plus
问题一： Web application could not be started as there was no org.springframework.boot.web.servlet.server.ServletWebServerFactory bean defined in the context.移除父pom中的tomcat相关配置 子pom中增加 SpringBoot Web容器 <!-- SpringBoot Web容器 …...
Docker基础-常见命令与数据卷
(一)常见命令 一、Docker常见命令 使用 docker pull 用来拉取仓库的镜像文件到本地；docker images 用于查看镜像文件；docker rmi 用于删除镜像文件docker build 用于自定义镜像，将来自己写的java项目也是通过这种方式来构建和打包࿱…...
C++基础（16 智能指针）
目录 1. 智能指针的使用场景分析 2. RAII和智能指针的设计思路 3. C标准库智能指针的使用 4. 智能指针的原理 5. shared_ptr和weak_ptr 5.1 shared_ptr循环引用问题 5.2 weak_ptr 如何检测内存泄漏（了解） 1. 智能指针的使用场景分析 下⾯程序中我…...
蓝耘智算携手通义万相2.1：助力 AIGC 生成效率与性能的革新实践
欢迎来到ZyyOvO的博客✨，一个关于探索技术的角落，记录学习的点滴📖，分享实用的技巧🛠️，偶尔还有一些奇思妙想💡 本文由ZyyOvO原创✍️，感谢支持❤️！请尊重原创…...
嵌入式学习-EXTI外部中断
STM32 是一种基于 ARM Cortex-M 内核的微控制器系列，广泛应用于嵌入式系统开发。中断（Interrupt）是 STM32 中一个非常重要的功能，它允许微控制器在执行主程序的同时，响应外部事件或内部事件的请求，从而实现…...
git 中 commit 的修改
修改最新的commit 1. 通过文本编辑器修改 # 修改最后一次提交的提交信息 git commit --amend2. 通过命令行修改 git commit --amend -m "新的提交信息"3. 仅添加遗漏的文件 # 添加遗漏的文件到暂存区 git add 遗漏的文件路径 # 修改最后一次提交，将暂…...
视觉Transformer（ViT）解析：它们比CNN更好吗？
深入理解计算机视觉任务中突破性架构的工作原理 1. 引言 自从自注意力机制（Self-Attention Mechanism）被引入以来，Transformer模型一直是自然语言处理（NLP）任务的首选。基于自注意力的模型具有高度并行化的特性&…...
rustup-init.exe 安装缓慢的解决办法
首先在rust官网下载安装程序，官网下载的 rustup-init.exe 下载慢，安装慢，或者直接卡死。 下载安装程序在本地，使用国内镜像加速 Rust 更新与下载。 使用国内镜像源：在 rustup-init.exe 程序文件夹下使用 PowerShell 中…...
动规【力扣】72. 编辑距离
数组含义： dp[i][j]含义是word1的i长度字符串和word2的j长度字符串所需的最少编辑距离。 递推公式： 1.当word1.charAt(i-1)word2.charAt(j-1)时，不用做任何操作，所以dp[i][j] dp[i-1][j-1]； 2.当word1.charAt(i-1)&a…...
获取哔站评论
一、文章立论 哔哩哔哩（B站）是当前年轻人十分喜爱的视频分享平台，以其丰富多样的内容、互动性强的社区氛围以及独特的弹幕文化深受用户喜爱。在该平台上，用户不仅可以观看各种类型的视频，如动画、游戏、科技、生活、影…...
LeetCode 链表章节
简单 21. 合并两个有序链表 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1： 输入：l1 [1,2,4], l2 [1,3,4] 输出：[1,1,2,3,4,4]示例 2： 输入：l1 [], l2…...
JavaScript实现倒计时函数
函数代码 /*** 倒计时* param {function} callback 回调函数，参数为当前剩余时间(time)* param {number} count 倒计时开始时间(s)* param {number} interval 间隔时间(ms)*/ function countDown(callback, count 60, interval 1000) {callback(count);const sta…...
Spring Boot全局异常处理：“危机公关”团队
目录 一、全局异常处理的作用二、Spring Boot 实现全局异常处理（附上代码实例）三、总结： 🌟我的其他文章也讲解的比较有趣😁，如果喜欢博主的讲解方式，可以多多支持一下，感谢…...
Vue 调用摄像头扫描条码
以下是一个基于 Vue.js 的页面代码示例，用于调用摄像头并扫描条码。我们将使用 jsQR 库来解析二维码（或条形码），这是一个轻量级的 JavaScript 库。 实现步骤： 安装依赖：需要引入 jsQR 库。调用摄像头&…...
springboot3.x下集成hsqldb数据库
springboot3.x下集成hsqldb数据库 本文使用目前最新的sringboot3.4.3 和HyperSQL 2.7.4演示 HSQLDB数据库简介 HSQLDB（HyperSQL DataBase）是一个开放源代码的JAVA数据库。 可以透过 jdbc driver 来存取, 支持 ANSI-92 标准的 SQL 语法, 而且他占的空…...
网络流算法: Edmonds-Karp算法
图论相关帖子 基本概念图的表示: 邻接矩阵和邻接表图的遍历: 深度优先与广度优先拓扑排序图的最短路径:Dijkstra算法和Bellman-Ford算法最小生成树二分图多源最短路径强连通分量欧拉回路和汉密尔顿回路网络流算法: Edmonds-Karp算法网络流算法: Dinic算法 环境要求 本文所用…...
ArcGIS Pro可见性分析：精通地形视线与视域分析
在地理信息系统（GIS）的广泛应用中，可见性分析作为一项关键技术，发挥着不可替代的作用。 无论是城市规划、环境监测，还是军事侦察、景观设计，可见性分析都能提供精确的数据支持，帮助我们更好地理…...
jenkens使用笔记
jenkens使用笔记 笔记使用版本是2.492.1 git仓库ssh证书配置 已开始配置一直不行，然后下载插件，多次重启等一些列操作， 后来配置就可以工作了，原因不祥，不知道哪个配置起效了。 等回来闹明白了，再补充笔记…...
解决跨域请求的问题（CORS）
目录 解决跨域请求问题的方法 1. 服务器端配置响应头 2. JSONP（JSON with Padding） 3. 代理服务器 场景示例 前端代码（使用 Fetch API） 后端代码（使用 Node.js Express 并设置 CORS 响应头） 跨域资…...
未来经济范式争夺战：AR眼镜为何成为下一代交互终端的制高点？
未来经济范式争夺战：AR眼镜为何成为下一代交互终端的制高点？ 在蒸汽机轰鸣的工业革命时代，煤炭、铁路、电报构建了第一个现代经济范式；互联网时代，电力、光纤、物流网络重构了全球经济版图。当前，我们正站…...
CentOS 7 安装Nginx-1.26.3
无论安装啥工具、首先认准了就是官网。Nginx Nginx官网下载安装包 Windows下载： http://nginx.org/download/nginx-1.26.3.zipLinxu下载 wget http://nginx.org/download/nginx-1.26.3.tar.gzLinux安装Nginx-1.26.3 安装之前先安装Nginx依赖包、自行选择 yum -y i…...