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

VUE篇之树形特殊篇

news 来源：原创 2025/5/18 15:32:10

根节点是level:1, level3及其子节点有关联，但是和level2和他下面的子节点没有关联

思路：采用守护风琴效果，遍历出level1和level2级节点，后面level3的节点，采用树形结构进行关联

<template><div :class="$style.root"><el-collapse v-model="activeName"><el-collapse-item v-for="item in treeData" :key="item.id" :name="item.id"><template slot="title"><el-checkbox v-model="item.checked" @change="changeData(item.id, item.children)"></el-checkbox>{{ item.label }}</template><el-collapse-item v-for="it in item.children" :key="it.id" :name="it.id"><template slot="title"><el-checkbox v-model="it.checked" @change="changeData(it.id, it.children)"></el-checkbox>{{ it.label }}</template><el-tree :ref="`tree-${it.id}`" :data="it.children" show-checkbox node-key="id" :props="defaultProps" /></el-collapse-item></el-collapse-item></el-collapse></div>
</template><script>
export default {data() {return {activeName: '1',checkedParentIds: [],treeData: [{id: 1,label: '根节点',level: 1,children: [{id: 11,label: '一级 1',level: 2,children: [{id: 4,label: '二级 1-1',level: 3,children: [{ id: 9, label: '三级 1-1-1', level: 4 },{ id: 10, label: '三级 1-1-2', level: 4 }]}]},{id: 2,label: '一级 2',level: 2,children: [{id: 5,label: '二级 2-1',level: 3,children: [{ id: 11, label: '三级 2-1-1', level: 4 }]},{id: 6,label: '二级 2-2',level: 3}]}]}],defaultProps: {children: 'children',label: 'label'}};},methods: {changeData(id, children) {if (this.checkedParentIds.includes(id)) {console.log('取消选中', id);this.checkedParentIds = this.checkedParentIds.filter(item => item !== id);this.setDisabled(children, false);} else {this.checkedParentIds = [...this.checkedParentIds, id];this.$refs[`tree-${id}`][0].setCheckedKeys([]); //取消勾选this.setDisabled(children, true);console.log('选中', id);}},//设置节点状态，true禁用false启用setDisabled(list, status) {list.forEach(item => {this.$set(item, 'disabled', status);if (item.children) {this.setDisabled(item.children, status);}});}}
};
</script>
<style lang="scss" module>
.root {padding: 20px;
}
:global {.el-collapse-item__content {padding: 0;padding-left:8px;}.el-collapse-item__header {padding-left: 20px;position: relative;height: 26px;line-height: 26px;.el-checkbox {position: absolute;right: 0;}.el-collapse-item__arrow {position: absolute;left: 0;}.el-icon-arrow-right:before {content: '\e791';color: #c0c4cc;}}.el-tree-node__content {position: relative;.el-checkbox {position: absolute;right: 0;margin-right: 0 !important;}}
}
</style>

VUE篇之树形特殊篇

根节点是level:1, level3及其子节点有关联，但是和level2和他下面的子节点没有关联思路：采用守护风琴效果，遍历出level1和level2级节点，后面level3的节点，采用树形结构进行关联 <template><div :class"…...

编程日记 2025/5/18 15:32:10

Qwen多模态系列论文

From:https://www.big-yellow-j.top/posts/2025/04/28/QwenVL.html 本文主要介绍Qwen-vl系列模型包括：Qwen2-vl、Qwen2.5-vl Qwen2-vl http://arxiv.org/abs/2409.12191 模型结构： Qwen2-vl主要的改进点在于：1、使用动态分辨率&#xff08…...

编程日记 2025/4/30 13:46:52

Astro大屏中关于数据流转的数据接入与数据中心之间的逻辑关系梳理

在 Astro 大屏中，「数据接入」与「数据中心」是紧密关联的一对模块，分别承担“数据从哪来”和“数据怎么管”的职责。为了更形象地帮助初学者理解，我可以用“自来水系统”的比喻来解释整个原理与操作逻辑： 🏠 形象比喻…...

编程日记 2025/5/18 15:13:26

【今日三题】小红的ABC(找规律) / 不相邻取数(多状态dp) / 空调遥控(排序+二分/滑动窗口)

⭐️个人主页：小羊 ⭐️所属专栏：每日两三题很荣幸您能阅读我的文章，诚请评论指点，欢迎欢迎 ~ 目录小红的ABC(找规律)不相邻取数(多状态dp)空调遥控(排序二分/滑动窗口) 小红的ABC(找规律) 小红的ABC 找最短回文串&#xff…...

编程日记 2025/5/18 15:24:12

双重差分模型学习笔记（理论）

【DID最全总结】90分钟带你速通双重差分！_哔哩哔哩_bilibili 一、DID的基本原理 （一） 单重差分 1. Cross-Section Comparison 截面数据只有某个时间点事件发生后的数据 D1 事件发生后 D0 事件发生前 2. Befor-After Vomparison 时间序列…...

编程日记 2025/5/18 15:13:26

企业级私有化部署，内部聊天软件

如何在激烈的市场竞争中脱颖而出，提升工作效率、降低运营成本，同时保障信息安全，成为众多企业管理者亟待解决的问题。而BeeWorks 企业级私有化部署的内部聊天软件，无疑是为这一难题提供了一把金钥匙。 BeeWorks覆盖即时通讯&#…...

编程日记 2025/5/15 9:05:01

HCIA-Datacom 高阶：VLAN、VLANIF 与静态路由综合实验

拓扑图解读从拓扑图中可以看到，存在三层交换机 LSW3、普通交换机 LSW4、路由器 R2 以及 PC1 - PC4。LSW4 连接了三个不同 VLAN 的 PC（PC1 属于 VLAN 10、PC2 属于 VLAN 20、PC3 属于 VLAN 30 ），并通过 Ethernet 0/0/1 端口以 tr…...

编程日记 2025/5/8 1:44:59

Android ndk 编译opencv后部分接口std::ndk1与项目std::1不匹配

1、opencv-4.11预编译命令（在opencv4.5.0之后兼容免费features2d做特征匹配），NDK版本选用的android-ndk-r23c-linux.zip cmake -G Ninja \ -DCMAKE_TOOLCHAIN_FILE/home/who/Downloads/NDK/android-ndk-r23c/build/cmake/android.toolchain.…...

编程日记 2025/5/18 10:55:48

SQL命令一：SQL 基础操作与建表约束

目录引言一、SQL 基础命令 （一）数据库相关操作 （二）表格相关操作 （三）MySQL 常用数据类型二、增删改查（CRUD）操作 （一）增加数据 （二&a…...

编程日记 2025/4/30 13:40:17

颜色分类，不靠“调色盘”：双指针 VS 计数排序的正面PK

颜色分类，不靠“调色盘”：双指针 VS 计数排序的正面PK 在算法圈混得久了，总有一些题目是面试官的心头好，刷题人绕不过的“鬼门关”。“颜色分类”（LeetCode 75）就是其中之一，看似小儿科&#xf…...

编程日记 2025/4/30 13:40:15

Shopify网上商店GraphQL Admin接口查询实战

目录一、Shopify网上商店二、个人商店配置接口权限三、PostMan调用接口测试四、通过Java服务调用接口一、Shopify网上商店 Shopify是由Tobi Ltke创办的加拿大电子商务软件开发商，总部位于加拿大首都渥太华，已从一家在咖啡店办公的 5人团队&…...

编程日记 2025/4/30 13:36:57

Laravel基础

Laravel 基础 01.Laravel入门和安装 Composer安装Laravel步骤要使用 Composer 安装 Laravel，请按照以下步骤操作： 确保已经安装了 Composer。如果还没有安装，请访问 https://getcomposer.org/download/ 下载并安装。打开命令行或终端。…...

编程日记 2025/4/30 13:36:55

【Leetcode 每日一题 - 补卡】2302. 统计得分小于 K 的子数组数目

问题背景一个数组的分数定义为数组之和乘以数组的长度。比方说， [ 1 , 2 , 3 , 4 , 5 ] [1, 2, 3, 4, 5] [1,2,3,4,5] 的分数为 ( 1 2 3 4 5 ) 5 75 (1 2 3 4 5) \times 5 75 (12345)575。给你一个正整数数组 n u m s nums nums 和一个整数 k…...

编程日记 2025/4/30 13:34:47

力扣——206.反转链表倒序输出链表

206. 反转链表 - 力扣（LeetCode） 思路（迭代） 设三个指针，前后两个指针都为空，当前指针为输入的头指针开始循环——判断条件为当前节点不为空先给下一个节点赋值为——当前节点的下一个改变当前节点的…...

编程日记 2025/4/30 13:33:43

Arthas在Java程序监控和分析中的应用

Arthas在Java程序监控和分析中的应用在互联网大厂Java求职者的面试中，经常会被问到关于使用Arthas来监控和分析Java程序的相关问题。本文通过一个故事场景来展示这些问题的实际解决方案。第一轮提问面试官：马架构，欢迎来到我们公司的面…...

编程日记 2025/4/30 13:32:40

第13讲：图形尺寸与分辨率设置——适配论文版面，打造专业图稿！

目录 📌 为什么这一讲重要？ 🎯 一、先认识几个关键词 ✍️ 二、ggsave() 是导出图的标准方法 📐 三、尺寸设置技巧：对齐目标期刊 🔍 找到目标期刊的图形栏宽 📦 四、多个图组合导出（与 patchwork 搭配） 🧪 五、使用 Cairo / ragg 导出高质量图 🎁 六…...

编程日记 2025/4/30 13:30:30

Docker与Vmware网络模式的对别

前言在使用了很久的VMware和Docker后，分别独立配置过他们的网络，但是每次配置一方时，总感觉和另一方有点不一样，但是也没有来得及总结。刚好最近有时间可以总结一下。重点： 1、VMware的桥接模式和Docker的桥接模式完…...

编程日记 2025/4/30 13:28:16

大模型在肾癌诊疗全流程中的应用研究报告

目录一、引言 1.1 研究背景与意义 1.2 研究目的与方法 1.3 国内外研究现状二、大模型预测肾癌术前情况 2.1 基于影像组学的肾癌良恶性及分级预测 2.1.1 MRI 影像组学模型预测肾透明细胞癌分级 2.1.2 CT 影像深度学习模型鉴别肾肿物良恶性及侵袭性 2.2 大模型对手术风…...

编程日记 2025/4/30 13:28:15

Springboot使用登录拦截器LoginInteceptor来做登录认证

创建拦截器LoginInteceptor类 interceptors/LoginInteceptor.java package org.example.interceptors;import jakarta.servlet.http.HttpServletRequest; import jakarta.servlet.http.HttpServletResponse; import org.example.utils.JwtUtil; import org.springframework.s…...

编程日记 2025/4/30 13:27:08

2025年- H13-Lc120-189.轮转数组（普通数组）---java版

1.题目描述 2.思路 import java.util.Arrays;public class H189 {public static void main(String[] args) {int[] newArr {1, 2, 3, 4, 5};int[] nums new int[5];System.arraycopy(newArr,0,nums,0,4);System.out.println(Arrays.toString(nums)); } }补充2： 3.…...

编程日记 2025/4/30 13:26:05

Android Framework常见问题

以下是不同难度级别的 Android Framework 面试题，包含答案要点，可帮助你为面试做好准备。初级难度 1. 请简要解释 Android Framework 是什么。答案要点：Android Framework 是 Android 系统的核心组成部分，它为开发者提供了一…...

编程日记 2025/4/30 13:26:04

【AI】图片处理的AI工具

博主最近需要给客户展示一下做的一些设备和仪器，随手拍了一些照片，觉的背景不是很好看，于是在网上寻找AI图片处理工具。后来随手用了一下豆包AI，发现很好用，这里把一点使用的心得体会记录一下，并和大家分享…...

编程日记 2025/4/30 13:24:58

Python列表全面解析：从基础到高阶操作

一、为什么需要列表？ 在Python中，列表是可变有序序列，用于存储多个元素的容器。相较于单一变量存储独立值，列表能更高效地管理批量数据，其特点包括： 引用存储：列表元素存储的是对象的引用…...

编程日记 2025/4/30 13:23:53

C++调用C动态库编译时报undefined reference to “funcxxx“错误

问题描述：Linux平台上C调用C库进行make编译时报undefined reference to "funcxxx"错误，错误实例如下： /usr/bin/ld: CMakeFiles/dialog.dir/widgets/widget.cpp.o: in function Widget::loadVerificationModule(): /home/zhangxia…...

编程日记 2025/4/30 13:23:52

基于Spring Boot+Vue 网上书城管理系统设计与实现(源码+文档+部署讲解）

技术范围：SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。主要内容：免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论文…...

编程日记 2025/4/30 13:23:51

C++ 中自主内存管理 new/delete 与 malloc/free 完全详解

C 中 new/delete 与 malloc/free 完全详解一、new/delete 与 malloc/free 的区别特性new/deletemalloc/free属于C语言C语言申请的内存区堆（Heap）堆（Heap）返回类型指向对象类型的指针（自动转换）void*&…...

编程日记 2025/4/30 13:21:41

Maven中的依赖管理

目录什么是依赖范围什么是依赖传递依赖范围对依赖传递的影响依赖冲突什么是依赖冲突依赖冲突的解决方案版本锁定短路径优先编辑声明优先特殊优先（后来者居上） 可选依赖排除依赖可选依赖和排除依赖的区别刷新依赖的8种方式…...

编程日记 2025/4/30 13:21:39

生态修复项目管理软件

在“双碳”目标与生态文明建设的双重驱动下，生态修复项目正成为全球环境治理的核心战场。然而，矿山复绿、湿地修复、水土保持等工程往往面临跨地域、多主体、长周期的管理难题——从数据分散到进度失控，从成本超支到风险频发，传统…...

编程日记 2025/4/30 13:20:32

深度剖析 RocketMQ 5.0 之架构解析：云原生架构如何支撑多元化场景？

拓展学习：🔍「RocketMQ 中文社区」持续更新，提供 RocketMQ 领域专家模型的 AI 答疑作者 | 隆基简介： 了解 RocketMQ 5.0 的核心概念和架构概览；然后我们会从集群角度出发，从宏观视角学习 RocketMQ 的管…...

编程日记 2025/4/30 13:20:27

Spring中bean的生命周期(笔记）

bean的生命周期，按照最重要五步第一步：实例化bean,调用无参构造方法（通过BeanDefinition利用反射实例化Bean对象(无参数构造方法) 并通过推断构造方法...并放入三级缓存中..） 第二步：给bean属性赋值（调用…...

编程日记 2025/4/30 13:19:18

transform-实现Encoder 编码器模块

Encoder 论文地址 https://arxiv.org/pdf/1706.03762 Encoder结构介绍 Transformer Encoder是Transformer模型的核心组件，负责对输入序列进行特征提取和语义编码。通过堆叠多层结构相同的编码层（Encoder Layer），每层包含自注意力机…...

编程日记 2025/4/30 13:19:15

LVGL -窗口操作

1 窗口背景介绍在 LVGL 中，screen 是一个顶层对象，代表你设备上当前显示的整个画面。它相当于一个“全屏容器”，你可以在上面添加按钮、标签、图像、容器等各种界面控件。它的本质就是一个特殊的 lv_obj_t，但它没有父对象&#…...

编程日记 2025/4/30 13:18:09

ollama运行qwen3

环境 windows server GPU 32G 内存 40G 升级ollama 需要版本 0.6.6以上 ollama --version拉取模型 ollama pull qwen3:32b时间比较长，耐心等待运行模型 ollama run qwen3:32b运行起来之后发现GPU是可以跑起来的,发个你好看看默认是深度思考的，不…...

编程日记 2025/4/30 13:18:07

如何查看和验证AWS CloudFront的托管区域ID

在使用AWS Route 53设置DNS记录时，正确识别CloudFront分发的托管区域ID是至关重要的。本文将详细介绍几种查看和验证CloudFront托管区域ID的方法，特别关注中国区CloudFront的特殊情况。为什么托管区域ID很重要？托管区域ID是AWS服务中的一个关键标识符。在创建指向CloudF…...

编程日记 2025/4/30 13:18:04

yum 安装 ncurses-devel 报错 baseurl 的解决方法

解决 yum 安装 ncurses-devel 报错（baseurl 问题） 出现 yum install ncurses-devel 报错 Cannot find a valid baseurl for repo: centos-sclo-rh/x86_64 的原因，很可能是因为 CentOS 7 的 SCL 源在 2024 年 6 月 30 日停止维护了。以下是解…...

编程日记 2025/4/30 13:13:49

《Vue3学习手记7》

组件通信（续） $attrs 组件通信：$attrs 适用于祖传孙或孙传祖 （需要通过中间组件） 传递给后代的数据，但未被接收，都保存在attrs中 1.祖传孙父组件： <template><div cl…...

编程日记 2025/4/30 13:12:41

算法备案类型解析：如何判断你的算法属于哪种类型？

根据《互联网信息服务算法推荐管理规定》政策，算法备案已经成为了强制性备案。但对于企业而言，如何准确判断自身算法所属的备案类型往往存在困惑，今天我们就来详细盘一盘算法备案的类型，教你如何判断自己的算法属于哪一类一、算…...

编程日记 2025/4/30 13:11:36

Javascript 中作用域的理解?

一、作用域的类型 1. 全局作用域（公司大门外） 范围：整个 JavaScript 文件变量：像贴在公告栏上的信息，所有人可见例子：const companyName "阿里"; // 全局变量，任何地方都能访问 fu…...

编程日记 2025/4/30 13:10:32

Qt入门——什么是Qt?

Qt背景介绍什么是Qt? Qt 是⼀个跨平台的 C 图形用户界面应用程序框架。它为应用程序开发者提供了建立艺术级图形界面所需的所有功能。它是完全面向对象的，很容易扩展。Qt 为开发者提供了⼀种基于组件的开发模式 ，开发者可以通过简单的拖拽和组合…...

编程日记 2025/4/30 13:07:14

Snap7西门子PLC通信协议

S7协议，作为西门子的专有协议，广泛应用于多种通讯服务中，如PG通讯、OP通讯以及S7基本通讯等。它独立于西门子的各种通讯总线，能够在MP、PROFIBUS、Ethernet以及PROFINET等多种网络上运行。S7协议实质上是一个由多种应用层协议构成…...

编程日记 2025/4/30 13:06:08

GTC Taipei 2025 医疗域前瞻：从AI代理到医疗生态，解码医疗健康与生命科学的未来图景

引言 2025年，全球医疗健康领域正经历一场由人工智能、机器人技术与分布式计算驱动的范式转移。随着NVIDIA及其生态伙伴在GTC Taipei 2025大会上的深度布局，医疗行业的核心趋势愈发清晰：AI代理程序（Digital AI Agents）赋能临床协作、医疗大数据与精准医学加速落地、医学影…...

编程日记 2025/4/30 13:05:04

C++的vector中emplace_back() 与 push_back() 的区别

C 中 vector 的 emplace_back() 和 push_back() 均用于向容器末尾添加元素，但二者在实现和效率上有显著区别： 1. 参数传递方式 push_back()：接受一个已构造的对象（左值或右值），将其拷贝或移动到容器中。 s…...

编程日记 2025/4/30 13:04:00

LangChain4j +DeepSeek大模型应用开发——5 持久化聊天记忆 Persistence

默认情况下，聊天记忆存储在内存中。如果需要持久化存储，可以实现一个自定义的聊天记忆存储类，以便将聊天消息存储在你选择的任何持久化存储介质中。 1. 存储介质的选择大模型中聊天记忆的存储选择哪种数据库，需要综合考虑数据特…...

编程日记 2025/4/30 13:03:55

C++核心编程 1.2 程序运行后

1.2 程序运行后栈区： 由编译器自动分配释放, 存放函数的参数值,局部变量等注意事项：不要返回局部变量的地址，栈区开辟的数据由编译器自动释放 int * func() {int a 10;return &a; }int main() {int *p func();cout << *p <…...

编程日记 2025/4/30 13:01:48

小市值策略复现（A股选股框架回测系统)

相关config配置 https://quantkt.com/forumDetail?id201043 很早就知道了小市值模型，正好量化选股回测框架出来了，把最裸的小市值复现下，顺便验证下框架逻辑。科普: 小市值策略基于 “小市值效应”，即从历史数据来看&#xf…...

编程日记 2025/4/30 13:01:45

C语言(6)—函数递归

文章目录一、递归的基本概念1.1 什么是递归1.2 递归的核心思想1.3 递归的必要条件二、递归的经典应用2.1 阶乘计算三、递归与迭代的比较3.1 递归的优缺点3.2 迭代的优缺点四、递归的底层机制4.1 函数调用栈4.2 栈溢出风险五、递归优化技巧5.1 记忆化（Memoizati…...

编程日记 2025/4/30 13:01:44

【网络】HTTP报文首部字段

目录一. 预备知识 1.1.代理、网关和隧道 1.1.1.代理 1.1.2.网关 1.1.3.隧道 1.2.保存资源的缓存 1.2.1.缓存的有效期限 1.2.2.客户端的缓存 1.3.用单台虚拟主机实现多个域名二. HTTP首部字段 2.1.HTTP 首部字段格式 2.2.四种 HTTP 首部字段类型三. HTTP通用首部…...

编程日记 2025/4/30 13:00:42

【Fifty Project - D20】

今日完成记录 TimePlan完成情况7：30 - 11：30收拾行李闪现广州 & 《挪威的森林》√10：00 - 11：00Leetcode√16：00 - 17：00健身√ Leetcode 每日一题每日一题来到了滑动窗口系列，今天是越…...

编程日记 2025/4/30 12:59:33

【Linux系统】systemV共享内存

system V共享内存在Linux系统中，共享内存是一种高效的进程间通信（IPC）机制，它允许两个或者多个进程共享同一块物理内存区域，这些进程可以将这块区域映射到自己的虚拟地址空间中。共享内存区是最快的IPC形式。一旦这…...

编程日记 2025/4/30 12:58:24

【计算机网络】DHCP——动态配置ip地址

DHCP 是什么？ DHCP（Dynamic Host Configuration Protocol，动态主机配置协议） 是一种网络协议，用于自动分配 IP 地址和其他网络配置参数（如子网掩码、默认网关、DNS 服务器等）给网络中的设备&…...

编程日记 2025/4/30 12:57:19

相关文章：