问题:el-tree点击某节点的复选框由半选状态更改为全选状态以后,点击该节点展开,懒加载出来子节点数据以后,该节点又变为半选状态

具体问题场景:
用户点击父节点复选框将其从半选变为全选(此时子节点尚未加载)。
点击节点展开触发懒加载,加载子节点。
子节点加载后,组件重新计算父节点状态,发现并非所有子节点被选中,因此父节点恢复半选状态

解决方案:
核心思路:手动维护状态一致性
在父节点被手动全选时,即使子节点未加载,仍需保证:
当子节点加载后,自动选中所有子节点
强制更新父节点状态

1. 记录用户手动全选操作
2. 在复选框勾选事件中捕获全选操作
3. 在懒加载子节点后强制选中子节点
4. 清理状态记录(在节点折叠时清理状态记录,避免残留状态影响后续操作)

代码:

<template><el-treeref="tree":data="treeData"lazy:load="loadNode"show-checkboxnode-key="menuId"@check="handleCheck"@node-collapse="handleNodeCollapse"></el-tree>
</template><script>
export default {data() {return {treeData: [],forcedFullCheckedNodes: new Set()};},methods: {async loadNode(node, resolve) {try {// 1. 加载子节点const children = await this.fetchChildren(node.data.menuId);// 2. 如果父节点曾被强制全选,标记子节点为选中if (this.forcedFullCheckedNodes.has(node.data.menuId)) {children.forEach(child => {child.checked = true;child.indeterminate = false;});}resolve(children);// 3. 强制刷新父节点状态this.$nextTick(() => {this.$refs.tree.updateNode(node);});} catch (error) {resolve([]);}},handleCheck(checkedNode) {// 检测是否是手动全选操作const isManualFullCheck = !checkedNode.children && //节点没有子节点(或子节点未加载)checkedNode.indeterminate && //节点之前处于半选状态this.$refs.tree.getCheckedKeys().includes(checkedNode.menuId);//节点当前已全选if (isManualFullCheck) {this.forcedFullCheckedNodes.add(e.menuId);}},handleNodeCollapse(collapsedNode) {// 节点折叠时清除状态记录this.forcedFullCheckedNodes.delete(collapsedNode.menuId);}}
};
</script>

data中定义数据为什么使用forcedFullCheckedNodes: new Set()?

用`Set`来跟踪那些被强制全选的节点,以确保即使子节点加载后,父节点的状态仍保持正确。
Set是JavaScript中的一种数据结构,可以自动保证存储的节点 ID 唯一,避免重复添加相同节点。用forcedFullCheckedNodes来记录那些被用户手动全选的节点ID,这样在加载子节点时,可以检查父节点是否在这个Set中,如果是,就强制其子节点为全选状态,从而保持父节点的全选状态。

为什么选择new Set()而不是其他数据结构,比如数组。Set提供了高效的查找和添加操作,因为Set的has和add方法的时间复杂度接近O(1),而数组的includes和push可能需要遍历,效率较低。尤其是当节点数量较多时,使用Set会更高效。


在节点折叠时清理状态(如从 forcedFullCheckedNodes 中移除节点 ID)的原因主要有以下几点:

1. 避免状态残留干扰后续操作
场景:用户手动全选父节点 → 展开节点加载子节点并强制全选 → 折叠节点(子节点可能被销毁或隐藏)。
风险:若保留父节点的强制全选标记,当用户再次展开时,会重新触发懒加载,此时如果父节点仍在 forcedFullCheckedNodes 中,会重复强制全选子节点,导致以下问题:
若用户之前已手动取消某些子节点,重复强制全选会覆盖用户操作。
若数据已通过其他方式(如后端保存的 checkedKeys)初始化,强制标记会引发状态冲突。


2. 符合用户直觉
用户预期:折叠操作通常意味着“暂时不再关注该节点”,此时清理临时状态更符合直觉。
示例:用户手动全选父节点 → 展开处理子节点 → 折叠节点(视为操作完成)。后续再次展开时,父节点应基于当前实际子节点的选中状态(如从后端获取的最新状态)决定显示全选/选,而非依赖临时标记。


3. 性能优化
内存管理:动态树结构可能有大量节点,及时清理不再需要跟踪的节点,避免 forcedFullCheckedNodes 集合无限膨胀。
响应式开销:在 Vue 中,若使用数组或普通对象存储标记,频繁操作可能触发不必要的响应式更新。而 Set 虽高效,但需手动维护。


4. 与数据持久化配合
正确流程:
用户手动全选父节点 → 立即将所有子孙节点的选中状态提交后端保存。
折叠节点 → 清理 forcedFullCheckedNodes 中的临时标记。
再次展开时 → 通过后端返回的完整 checkedKeys 初始化选中状态,而非依赖内存中的临时标记。
优势:确保父子节点状态始终基于持久化数据,而非临时内存状态,避免数据不一致。

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

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

相关文章

FastGPT安装前,系统环境准备工作?

1.启用适用于 Linux 的 Windows 子系统 方法一&#xff1a;打开控制面板 -> 程序 -> 启用或关闭Windows功能->勾选 “适用于Linux的Vindows子系统” 方法二&#xff1a;以管理员身份打开 PowerShell&#xff08;“开始”菜单 >“PowerShell” >单击右键 >“…

网页端调用本地应用打开本地文件(PDF、Word、excel、PPT)

一、背景原因 根据浏览器的安全策略&#xff0c;在网页端无法直接打开本地文件&#xff0c;所以需要开发者曲线救国。 二、实现步骤 前期准备&#xff1a; 确保已安装好可以打开文件的应用软件&#xff0c;如&#xff0c;WPS&#xff1b; 把要打开的文件统一放在一个文件夹&am…

EnlightenGAN:低照度图像增强

简介 简介:记录如何使用EnlightenGAN来做低照度图像增强。该论文主要是提供了一个高效无监督的生成对抗网络,通过全球局部歧视器结构,一种自我调节的感知损失融合,以及注意机制来得到无需匹配的图像增强效果。 论文题目:EnlightenGAN: Deep Light Enhancement Without P…

010数论——算法备赛

数论 模运算 一般求余都是对正整数的操作&#xff0c;如果对负数&#xff0c;不同编程语言结果可能不同。 C/javapythona>m,0<a%m<m-1 a<m,a%ma~5%32~-5%3 -21(-5)%(-3) -2~5%(-3)2-1正数&#xff1a;&#xff08;ab&#xff09;%m((a%m)(b%m))%m~正数&#xff…

初识Redis · C++客户端string

目录 前言&#xff1a; string的API使用 set get&#xff1a; expire: NX XX: mset,mget&#xff1a; getrange setrange: incr decr 前言&#xff1a; 在前文&#xff0c;我们已经学习了Redis的定制化客户端怎么来的&#xff0c;以及如何配置好Redis定制化客户端&…

GoogleCodeUtil.java

Google动态验证码实现 GoogleCodeUtil.java package zwf;import java.io.UnsupportedEncodingException; import java.net.URLEncoder; import java.nio.charset.StandardCharsets; import java.security.SecureRandom;/** https://mvnrepository.com/artifact/commons-codec/…

【Leetcode 每日一题】2176. 统计数组中相等且可以被整除的数对

问题背景 给你一个下标从 0 0 0 开始长度为 n n n 的整数数组 n u m s nums nums 和一个整数 k k k&#xff0c;请你返回满足 0 ≤ i < j < n 0 \le i < j < n 0≤i<j<n&#xff0c; n u m s [ i ] n u m s [ j ] nums[i] nums[j] nums[i]nums[j] 且…

如何校验一个字符串是否是可以正确序列化的JSON字符串呢?

方法1&#xff1a;先给一个比较暴力的方法 try {JSONObject o new JSONObject(yourString); } catch (JSONException e) {LOGGER.error("No valid json"); } 方法2&#xff1a; Object json new cn.hutool.json.JSONTokener("[{\"name\":\"t…

【路由交换方向IE认证】BGP选路原则之AS-Path属性

文章目录 一、路由器BGP路由的处理过程控制平面和转发平面选路工具 二、BGP的选路顺序选路的前提选路顺序 三、AS-Path属性选路原则AS-Path属性特性AS-Path管进还是管出呢&#xff1f;使用AS-Path对进本AS的路由进行选路验证AS-Path不接收带本AS号的路由 四、BGP邻居建立配置 一…

2025年热门项目管理软件对比:20款工具详解

本文主要盘点的工具有&#xff1a;1. PingCode; 2. Worktile; 3. Jira; 4. Trello; 5. TAPD; 6. Monday.com; 7. 进度猫; 8. 猪齿鱼; 9. 简道云; 10. Tita项目管理等等20款项目管理软件&#xff08;含免费&#xff09;。 在如今竞争激烈的商业环境中&#xff0c;项目管理软件已…

yaffs_write_new_chunk()函数解析

yaffs_write_new_chunk() 是 YAFFS&#xff08;Yet Another Flash File System&#xff09;文件系统中用于将数据写入新物理块&#xff08;chunk&#xff09;的关键函数。以下是其详细解析&#xff1a; 函数原型 int yaffs_write_new_chunk(struct yaffs_dev *dev, const u8 *…

网络安全-Burp Suite基础篇

声明 本文主要用做技术分享&#xff0c;所有内容仅供参考。任何使用或者依赖于本文信息所造成的法律后果均与本人无关。请读者自行判断风险&#xff0c;并遵循相关法律法规。 1 Burp Suite功能介绍 1.1 Burp Suite 简介 Burp Suite 是一款极为强大且广受欢迎的集成化 …

网络编程 - 2

目录 UDP 数据报套接字编程 API 介绍 DatagramSocket DatagramPacket 补充&#xff1a; 代码示例 - 回显服务器 服务器端&#xff1a; 客户端&#xff1a; 补充&#xff1a; 代码演示 梳理代码&#xff1a; 下面是一个大概的流程图~ 文字解释&#xff1a; 图文并…

【C++深入系列】:模版详解(上)

&#x1f525; 本文专栏&#xff1a;c &#x1f338;作者主页&#xff1a;努力努力再努力wz &#x1f4aa; 今日博客励志语录&#xff1a; 你不需要很厉害才能开始&#xff0c;但你需要开始才能很厉害。 ★★★ 本文前置知识&#xff1a; 类和对象&#xff08;上&#xff09; …

java 设计模式之策略模式

简介 策略模式&#xff1a;策略模式可以定制目标对象的行为&#xff0c;它通过传入不同的策略实现&#xff0c;来配置目标对象的行为。使用策略模式&#xff0c;就是为了定制目标对象在某个关键点的行为。 策略模式中的角色&#xff1a; 上下文类&#xff1a;持有一个策略类…

Perf学习

重要的能解决的问题是这些&#xff1a; perf_events is an event-oriented observability tool, which can help you solve advanced performance and troubleshooting functions. Questions that can be answered include: Why is the kernel on-CPU so much? What code-pa…

「仓颉编程语言」Demo

仓颉编程语言」Demo python 1)# 仓颉语言写字楼管理系统示例&#xff08;虚构语法&#xff09;# 语法规则&#xff1a;中文关键词 类Python逻辑定义 写字楼管理系统属性:租户库 列表.新建()报修队列 列表.新建()费用单价 5 # 元/平方米方法 添加租户(名称, 楼层, 面积):…

锁(Mutex)、信号量(Semaphore)与条件量(Condition Variable)

一、同步机制的核心意义 在多线程/多进程编程中&#xff0c;当多个执行流共享资源&#xff08;如变量、内存、文件&#xff09;时&#xff0c;可能因操作顺序不确定导致数据竞争&#xff08;Data Race&#xff09;。同步机制的作用是&#xff1a; 保证原子性&#xff1a;确保…

前端基础之《Vue(6)—组件基础(2)》

接上一篇。 七、v-model深入学习 <html> <head><title>组件基础-4</title><style>.score {display: inline-block;}.score>span {display: inline-block;width: 25px;height: 25px;background: url(./assets/star.png) center center / 25p…

SQL:聚合函数(Aggregate Functions)

目录 第一性原理出发思考 ——我们为什么需要聚合函数&#xff1f; 什么是聚合函数&#xff1f; 常见聚合函数 实例讲解 &#x1f538; 1. COUNT() —— 计数 &#x1f538; 2. MAX() / MIN() —— 最大 / 最小值 &#x1f538; 3. SUM() —— 求和 &#x1f538; 4. …