当前位置：首页 > news >正文

el-tree选中数据重组成树

news 来源：原创 2025/9/21 13:12:48

vue+element-ui 实现el-tree选择重新生成一个已选中的值组成新的数据树，效果如下

<template><div  class="flex"><el-tree class="tree-row" :data="list" ref="tree" :props="{children: 'children', label: 'itemCategoryName'}" show-checkbox node-key="id" default-expand-all  @check-change="getChecked"></el-tree><el-tree class="tree-row" :data="selectedTreeData"  :props="{children: 'children', label: 'itemCategoryName'}"  node-key="id" default-expand-all   :expand-on-click-node="false"><span class="custom-tree-node" slot-scope="{ node, data }"><span>{{ node.label }}</span><span><el-buttontype="text"size="mini"@click="() => remove(node, data)">Delete</el-button></span></span></el-tree></div>
</template>
<script>
export default {data() {return {list: [{"id": "4100000000000071","itemCategoryCode": "001","itemCategoryName": "白酒类",children: [{"id": "41000020000000071","itemCategoryCode": "0012","itemCategoryName": "白酒类2",children: [{"id": "41000040000000071","itemCategoryCode": "0014","itemCategoryName": "白酒类4",},{"id": "41000050000000071","itemCategoryCode": "0015","itemCategoryName": "白酒类5",},{"id": "41000060000000071","itemCategoryCode": "0016","itemCategoryName": "白酒类6",}]},{"id": "41000030000000071","itemCategoryCode": "0013","itemCategoryName": "白酒类3",}]},],// selectedIds: ['41000040000000071', "41000060000000071"],selectedTreeData:[]}},created() {},methods: {getChecked() {this.selectedIds = this.$refs.tree.getCheckedKeys(true);this.extractSubtrees();},extractSubtrees() {const subtrees = [];for (const id of this.selectedIds) {const subtree = this.extractSubtree(this.list, id);if (subtree) {subtrees.push(subtree);}}this.selectedTreeData = this.mergeSubtrees(subtrees);},extractSubtree(treeData, targetId) {for (const node of treeData) {if (node.id === targetId) {// return this.cloneAndFilterChildren(node); 可以用这个也可以用下边的方式return { ...node };}if (node.children) {const subtree = this.extractSubtree(node.children, targetId);if (subtree) {// return this.cloneAndFilterChildren({ ...node, children: [subtree] });可以用这个也可以用下边的方式return { ...node, children: [subtree] };}}}return null;},cloneAndFilterChildren(node) {if (!node.children || node.children.length === 0) {return { ...node, children: [] };}const filteredChildren = node.children.map(child => this.cloneAndFilterChildren(child)).filter(child => this.selectedIds.includes(child.id) || child.children.length > 0);return { ...node, children: filteredChildren };},mergeSubtrees(subtrees) {this.mergedTree = [];const idMap = {};for (const subtree of subtrees) {this.addSubtreeToMergedTree(this.mergedTree, subtree, idMap);}return this.mergedTree;},addSubtreeToMergedTree(mergedTree, subtree, idMap) {if (!subtree) return;const node = { ...subtree, children: [] };if (!idMap[node.id]) {idMap[node.id] = node;mergedTree.push(node);} else {// Object.assign(idMap[node.id], node);}if (subtree.children) {for (const child of subtree.children) {this.addSubtreeToMergedTree(mergedTree[mergedTree.length-1].children, child, idMap);}}},remove(node, data) {let keys = [];this.getRemovedIds(data,keys);keys.map(item => {this.selectedIds.splice(this.selectedIds.indexOf(item), 1);})this.$refs.tree.setCheckedKeys(this.selectedIds);},getRemovedIds(data,keys) {if (data.children && data.children.length > 0) {data.children.map(item => {this.getRemovedIds(item,keys);})} else {keys.push(data.id);}},}
}</script>
<style lang="less" scoped>
.flex {display: flex;justify-content: space-evenly;
}
.tree-row{min-width: 200px;
}
.custom-tree-node{display: flex;flex:1;justify-content: space-around;
}
</style>

el-tree选中数据重组成树

vueelement-ui 实现el-tree选择重新生成一个已选中的值组成新的数据树，效果如下 <template><div class"flex"><el-tree class"tree-row" :data"list" ref"tree" :props"{children: children, label: …...

编程日记 2025/9/21 13:12:48

IO、NIO解读和不同点，以及常用的文件流操作方法

java高级——IO、NIO解读和不同点，以及常用的文件流操作方法前情提要文章介绍1. 什么是IO1.1 节点的分类1.2 传输方式 2. 七大传输方式解读2.1 File类解读2.1.1 创建文件的三种方式2.2.2 File的常用方法2.2.3 如何正确认识FileUtils 2.2 字节流（核心&am…...

编程日记 2025/9/19 14:58:23

51单片机-按键

1、独立按键 1.1、按键介绍轻触开关是一种电子开关，使用时，轻轻按开关按钮就可使开关接通，当松开手时，开关断开。 1.2、独立按键原理按键在闭合和断开时，触点会存在抖动现象。P2\P3\P1都是准双向IO口，…...

编程日记 2025/9/18 11:37:58

Spring Boot Actuator 监控✨

Spring Boot Actuator 是 Spring Boot 提供的一个强大的监控和管理工具，它可以帮助你深入了解和监控你的应用程序的运行状态。通过 Actuator，你可以获取应用程序的健康状况、内存使用情况、线程信息、HTTP 请求跟踪等。🚀 核心知识点 &#…...

编程日记 2025/9/20 11:11:34

SpringBoot论坛网站 – 功能详解与部署教程

项目概述《SpringBoot的论坛网站》是一个基于SpringBoot框架开发的现代化论坛平台，旨在为用户提供一个便捷的交流空间。该项目不仅功能丰富，还具备良好的扩展性和易用性，适合用于学习、分享和讨论各类话题。以下是项目的核心功能模块和部署…...

编程日记 2025/9/13 1:42:47

俄罗斯方块游戏完整代码示例

以下是一个基于Cocos Creator引擎开发的俄罗斯方块游戏的完整代码示例。该游戏实现了俄罗斯方块的基本功能，并且代码整合在单个文件中，无需任何外部依赖，可以直接在浏览器中运行。 1. 创建Cocos Creator项目首先，确保你已经安装了…...

编程日记 2025/9/21 13:11:14

【设计模式】【结构型模式】组合模式（Composite）

👋hi，我不是一名外包公司的员工，也不会偷吃茶水间的零食，我的梦想是能写高端CRUD 🔥 2025本人正在沉淀中… 博客更新速度 👍 欢迎点赞、收藏、关注，跟上我的更新节奏 🎵 当你的天空突…...

编程日记 2025/9/21 13:12:47

【设计模式】03-理解常见设计模式-行为型模式（专栏完结）

前言前面我们介绍完创建型模式和创建型模式，这篇介绍最后的行为型模式，也是【设计模式】专栏的最后一篇。一、概述行为型模式主要用于处理对象之间的交互和职责分配，以实现更灵活的行为和更好的协作。二、常见的行为型模式 1、观察者模…...

编程日记 2025/9/21 12:37:50

Qt 6.8版本自制windows下运行软件＜一＞——串口调试助手

自制串口调试助手哔哩哔哩效果展示一、说明本人在读学生，跟随哔哩哔哩网站北京迅为公司的教学视频，进行学习qt，由于视频中的实现过程是利用ui界面的实现，本人在学习过程中，通过完全敲代码的形式，实现同…...

编程日记 2025/9/13 1:42:41

Qt——静态函数中发送信号方法总结（不需要通过类内部信号与槽实现，关键是清楚你发送的信号源自哪个对象）

【系列专栏】：博主结合工作实践输出的，解决实际问题的专栏，朋友们看过来！《项目案例分享》《极客DIY开源分享》《嵌入式通用开发实战》《C++语言开发基础总结》《从0到1学习嵌入式Linux开发》《QT开发实战》《Android开发实战》...

编程日记 2025/9/21 5:09:46

深入解析 vLLM：高性能 LLM 服务框架的架构之美（一）原理与解析

修改内容时间2.4.1处理请求的流程，引用更好的流程图2025.02.11首发2025.02.08 深入解析 vLLM：高性能 LLM 服务框架的架构之美（一）原理与解析深入解析 vLLM：高性能 LLM 服务框架的架构之美（二）…...

编程日记 2025/9/16 0:57:10

关于视频去水印的一点尝试

一. 视频去水印的几种方法 1. 使用ffmpeg delogo滤镜 delogo 滤镜的原理是通过插值算法，用水印周围的像素填充水印的位置。示例： ffmpeg -i input.mp4 -filter_complex "[0:v]delogox420:y920:w1070:h60" output.mp4 该命令表示通过滤镜…...

编程日记 2025/9/13 1:42:36

前端常见面试题-2025

vue4.0 Vue.js 4.0 是在 2021 年 9 月发布。Vue.js 4.0 是 Vue.js 的一个重要版本，引入了许多新特性和改进，旨在提升开发者的体验和性能。以下是一些关键的更新和新特性： Composition API 重构：Vue 3 引入了 Composition API 作为…...

编程日记 2025/9/13 1:42:34

JavaEE-SpringBoot快速入门

文章目录本节目标Maven什么是Maven创建一个Maven项目maven项目功能maven的依赖管理全球仓库, 私服, 本地服务器, 配置国内镜像第一个SpringBoot项目创建项目运行SpringBoot程序 SpringBoot原理初步Web服务器总结本节目标了解什么是maven, 配置国内源使用Springboot创建项…...

编程日记 2025/9/21 6:57:49

盛铂科技 SMF106 低相位噪声贴片式频率综合器模块

在现代通信和电子设备领域，频率综合器作为关键组件，其性能优劣直接影响系统的整体表现。盛铂科技的 SMF106 低相位噪声贴片式频率综合器，以其卓越的性能和独特设计，成为众多高性能系统的选择。一、频率覆盖范围广，步进…...

编程日记 2025/9/13 4:15:07

前端【技术方案】重构项目

1. 明确重构目标优化性能减少页面加载时间降低资源占用提升代码可维护性更规范的代码风格更清晰的代码结构更明确的模块设计扩展功能为项目添加新功能改进现有功能 2. 评估项目现状审查代码全面检查现有代码，找出代码中的问题，如代码冗余、耦合…...

编程日记 2025/9/15 21:53:23

第十六天 HarmonyOS WebView开发实战：从加载网页到与JavaScript交互

HarmonyOS WebView开发实战：从加载网页到与JavaScript交互一、WebView基础与HarmonyOS特性解析在移动应用开发中，WebView作为内嵌浏览器组件，在HarmonyOS（鸿蒙系统）中扮演着重要角色。它不仅能够加载本地和远程网页…...

编程日记 2025/9/13 4:15:04

Unity学习part2

为bilibili教程【【Unity教程】零基础带你从小白到超神】 https://www.bilibili.com/video/BV1gQ4y1e7SS/?p50&share_sourcecopy_web&vd_source6e7a3cbb802eb986578ad26fae1eeaab的笔记 1、灯光的使用定向光模拟太阳，是平行光。旋转定向光，光…...

编程日记 2025/9/19 3:21:45

贪吃蛇游戏

贪吃蛇一、html <div class"container" id"app"></div><script src"./js/index.js"></script>二、css * {margin: 0;top: 0;} .set {margin: 15px auto;width: 600px; } .container {width: 600px;height: 600px;bac…...

编程日记 2025/9/21 2:18:27

docker修改镜像默认存储路径（基于 WSL2 的迁移方法）

打开powershell窗口任意地方shift右键 1、停止 WSL wsl --shutdown2、导出数据 wsl --export docker-desktop-data E:\docker\DockerDesktopdata\docker-desktop-data.tar wsl --export docker-desktop E:\docker\DockerDesktop\docker-desktop.tar3、取消注册 wsl --un…...

编程日记 2025/9/20 12:52:42

C#+SqlSugar实现主从库读写分离

在使用 **SqlSugar** 进行分库操作时，可以通过配置多个数据库连接，并根据业务逻辑动态切换数据库。以下是一个完整的分库示例，展示如何实现分库功能。 --- ### **1. 安装 NuGet 包** 安装 SqlSugarCore： bash dotnet add packag…...

编程日记 2025/9/20 1:23:58

从无序到有序：上北智信通过深度数据分析改善会议室资源配置

当前企业普遍面临会议室资源管理难题，预约机制不完善和临时会议多导致资源调度不合理，既有空置又有过度拥挤现象。针对上述问题，上北智信采用了专业数据分析手段，巧妙融合楼层平面图、环形图、折线图和柱形图等多种可视化工具&a…...

编程日记 2025/9/19 23:15:26

以太网详解（八）传输层协议：TCP/UDP 协议

文章目录传输层协议概述为什么需要传输层？传输层功能网络层与传输层在实现 “端到端” 传输的异同两类服务:面向连接/无连接服务传输控制协议 TCPTCP 协议数据单元格式TCP 的重传机制快重传和快恢复快重传举例快恢复算法用户数据报协议 UDPUDP 概述UDP 基本工作过…...

编程日记 2025/9/20 13:15:06

CentOS 8 配置bond

CentOS 8 网络配置的详细步骤和对应的配置文件内容。 1. 配置聚合网卡（Bonding）配置intranet聚合网卡在/etc/sysconfig/network-scripts/目录下创建ifcfg-intranet文件，内容如下： TYPE=Bond NAME=intranet DEVICE=intranet ONBOOT=yes BOOTPROTO=none IPADDR=10.2.1.22…...

编程日记 2025/9/21 4:12:51

C语言基础16：二维数组、字符数组

二维数组定义二维数组本质上是一个行列式的组合，也就是说二维数组由行和列两部分组成。属于多维数组，二维数组数据是通过行列进行解读。二维数组可被视为一个特殊的一维数组，相当于二维数组又是一个一维数组，只不过它的元素…...

编程日记 2025/9/19 10:46:08

Java 同步锁性能的最佳实践：从理论到实践的完整指南

目录一、同步锁性能分析 （一）性能验证说明 1. 使用同步锁的代码示例 2. 不使用同步锁的代码示例 3. 结果与讨论 （二）案例初步优化分析说明 1. 使用AtomicInteger原子类尝试优化分析 2. 对AtomicInteger原子类进一步优化 …...

编程日记 2025/9/21 5:19:27

思科、华为、H3C常用命令对照表

取消/关闭思科no华为undo华三undo 查看思科show华为display华三display 退出思科exit华为quit华三quit 设备命名思科hostname华为sysname华三sysname 进入全局模式思科enable、config terminal华为system-view华三system-view 删除文件思科delete华为delete华…...

编程日记 2025/9/20 14:23:34

[qt5学习笔记]Application Example示例程序源码解析

开发环境问题 vs2022下直接打开ui、ts文件失败解决办法如下图， 设置designer独立运行。估计是嵌入运行存在些许bug。同理，ts编辑工具linguist也存在这个问题。 qrc rc的编辑嵌入编辑都正常，但分离式更稳定可靠。 qt creator编译失败原…...

编程日记 2025/9/20 5:49:11

华为交换机堆叠技术简介配置

目录一、华为堆叠技术简介（一）提高可靠性（二）扩展端口数量（三）增大带宽（四）简化组网（五）长距离堆叠二、华为交换机堆叠技术的案例及命令配置（一…...

编程日记 2025/9/20 3:13:39

腿足机器人之四- 卡尔曼滤波

腿足机器人之四卡尔曼滤波概率学基础贝叶斯准则熵卡尔曼滤波扩展卡尔曼滤波信息滤波器在机器人（四足、人形）领域，感知和行动的不确定性可能由多种因素引起，如传感器噪声、外部环境的变化、非精确控制以及实时性算力限制等。和…...

编程日记 2025/9/13 4:14:41

nginx 部署前端vue项目

👨‍⚕ 主页： gis分享者 👨‍⚕ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕ 收录于专栏：前端工程师文章目录一、🍓什么是nginx？二、🍓nginx 部署…...

编程日记 2025/9/19 13:11:18

【第1章：深度学习概览——1.6 深度学习框架简介与选择建议】

嘿，各位老铁们，今天咱们来一场深度学习框架的深度探索之旅。在这个充满无限可能的深度学习时代，深度学习框架就像是连接理论与实践的桥梁，帮助我们从算法设计走向实际应用。随着技术的飞速发展，深度学习框架的选择变得越来越多样化，每一种框架都有其独特的优势和适用场景…...

编程日记 2025/9/13 4:14:38

NLLB 与 ChatGPT 双向优化：探索翻译模型与语言模型在小语种应用的融合策略

作者：来自 vivo 互联网算法团队- Huang Minghui 本文探讨了 NLLB 翻译模型与 ChatGPT 在小语种应用中的双向优化策略。首先介绍了 NLLB-200 的背景、数据、分词器和模型，以及其与 LLM（Large Language Model）的异同和协同关系。接着…...

编程日记 2025/9/18 17:10:41

C#的委托delegate与事件event

在C#中，delegate（委托）和 event（事件）是两个非常重要的概念，它们主要用于实现回调机制和事件驱动编程。下面详细介绍它们的原理和使用场景。 1. Delegate（委托） 1.1 委托的原理委托…...

编程日记 2025/9/20 10:33:53

Spring Boot 集成MyBatis-Plus

文章目录一、背景说明二、集成过程 2.1 引入 maven 依赖2.2 增加属性配置2.3 自动配置类三、验证集成 3.1 控制器3.2 服务类3.3 Mapper接口类3.4 实体类3.4 不要忘记XML文件3.5 发起请求四、技巧拓展 4.1 如何打印sql语句？4.2 如何对参数增加非空验证&#xff1f…...

编程日记 2025/9/21 11:24:47

javacv将视频切分为m3u8视频并播放

学习链接 ffmpeg-demo 当前对应的 gitee代码 Spring boot视频播放(解决MP4大文件无法播放)，整合ffmpeg,用m3u8切片播放。 springboot 通过javaCV 实现mp4转m3u8 上传oss 如何保护会员或付费视频？优酷是怎么做的？ - HLS 流媒体加密 ffmpe…...

编程日记 2025/9/20 14:09:11

Docker 入门与实战：从安装到容器管理的完整指南

🚀 Docker 入门与实战：从安装到容器管理的完整指南 🌟 📖 简介在现代软件开发中，容器化技术已经成为不可或缺的一部分。而 Docker 作为容器化领域的领头羊，以其轻量级、高效和跨平台的特性，深…...

编程日记 2025/9/19 23:15:28

计算机视觉：卷积神经网络(CNN)基本概念(二)

第一章：计算机视觉中图像的基础认知第二章：计算机视觉：卷积神经网络(CNN)基本概念(一) 第三章：计算机视觉：卷积神经网络(CNN)基本概念(二) 第四章：搭建一个经典的LeNet5神经网络接上一篇《计算机视觉&am…...

编程日记 2025/9/20 12:29:32

SQL SERVER的PARTITION BY应用场景

SQL SERVER的PARTITION BY关键字说明介绍 PARTITION BY关键字介绍具体使用场景排名计算累计求和分组求最值分组内百分比计算分组内移动平均计算分组内数据分布统计分组内数据偏移计算总结 PARTITION BY关键字介绍在SQL SERVER中，关键字PARTITION BY主要用于窗口函…...

编程日记 2025/9/21 6:37:59

【ISO 14229-1:2023 UDS诊断全量测试用例清单系列：第十二节】

ISO 14229-1:2023 UDS诊断服务测试用例全解析（TesterPresent_0x3E服务） 作者：车端域控测试工程师更新日期：2025年02月14日关键词：UDS协议、0x3E服务、会话保持、ISO 14229-1:2023、ECU测试一、服务功能概述 0x3E服…...

编程日记 2025/9/18 23:03:26

gsoap实现webservice服务

gsoap实现webservice服务在实现Web服务时，使用gSOAP是一个很好的选择，因为它提供了强大的工具和库来创建SOAP和RESTful服务。gSOAP是一个C和C语言开发的库，它支持SOAP协议的各种版本，包括SOAP 1.1和SOAP 1.2。下面是如何使用gSO…...

编程日记 2025/9/21 12:20:43

达梦：dmserver占用io高排查

目录标题 1. 使用达梦数据库的性能视图查询当前活动会话查询执行时间较长的 SQL 2. 使用 DM 性能监视工具3. 使用操作系统工具监控 I/Oiostat 工具dstat 工具 4. 优化查询和索引审查 SQL 执行计划优化索引 5. 调整数据库参数6. 分析数据库日志7. 硬件和存储检查总结针对达梦数…...

编程日记 2025/9/21 11:11:29

MoE架构中的专家选择门控机制：稀疏激活如何实现百倍效率突破？

技术原理（数学公式与核心逻辑） 核心公式门控网络输出： G ( x ) Softmax ( W g ⋅ x b g ) G(x) \text{Softmax}(W_g \cdot x b_g) G(x)Softmax(Wg⋅xbg) 最终输出： y ∑ i 1 n G i ( x ) ⋅ E i ( x ) (仅保留Top-…...

编程日记 2025/9/16 21:40:10

用python写一个聊天室程序

下面是一个简单的基于Socket的Python聊天室程序示例，包括服务器端和客户端： 服务器端代码： import socket import threadingdef handle_client(client, address):print(f"New connection from {address}")while True:msg client…...

编程日记 2025/9/19 19:17:58

七星棋牌全开源修复版源码解析：6端兼容，200种玩法全面支持

本篇文章将详细讲解七星棋牌修复版源码的技术架构、功能实现、二次开发思路、搭建教程等内容，助您快速掌握该棋牌系统的开发技巧。 1. 七星棋牌源码概述七星棋牌修复版源码是一款高度自由的开源棋牌项目，该版本修复了原版中的多个系统漏洞&#…...

编程日记 2025/9/13 4:14:18

Vulhub靶机 ActiveMQ任意文件写入（CVE-2016-3088）（渗透测试详解）

一、开启vulhub环境 docker-compose up -d 启动 docker ps 查看开放的端口漏洞版本：ActiveMQ在5.14.0之前的版本（不包括5.14.0） 二、访问靶机IP 8161端口默认账户密码都是admin 1、利用bp抓包，修改为PUT方法并在fileserver…...

编程日记 2025/9/20 4:48:58

Cloud: aws:network: limit 含有pps这种限制

https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/troubleshooting-ena.html#statistics-ena 这个是调查网络问题的一个网页；在里面，竟然含有pps这种限制：ethtool -S；其实是比较苛刻的安全相关的策略？ [ec2-user ~]$ ethtool -S ethN NIC statistics:tx_timeout: …...

编程日记 2025/9/20 1:17:17

28、深度学习-自学之路-NLP自然语言处理-做一个完形填空，让机器学习更多的内容程序展示

import sys,random,math from collections import Counter import numpy as npnp.random.seed(1) random.seed(1) f open(reviews.txt) raw_reviews f.readlines() f.close()tokens list(map(lambda x:(x.split(" ")),raw_reviews))#wordcnt Counter() 这行代码的…...

编程日记 2025/9/16 9:19:31

观察者模式说明(C语言版本)

观察者模式主要是为了实现一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象。这个主题对象在状态发生变化时，会通知所有观察者对象，使它们能够自动更新自己。下面使用C语言实现了一个具体的应用示例，有需要的可以参考…...

编程日记 2025/9/13 4:14:11

LC-搜索二维矩阵II、相交链表、反转链表、回文链表、环形链表、环形链表ll

搜索二维矩阵II 方法：从右上角开始搜索我们可以从矩阵的右上角开始进行搜索。如果当前元素 matrix[i][j] 等于 target，我们直接返回 true。如果 matrix[i][j] 大于 target，说明 target 只能出现在左边的列，所以我们将列指针向左…...

编程日记 2025/9/19 17:50:36

相关文章：