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

文档操作方法得合理使用

博主介绍:✌全网粉丝5W+,全栈开发工程师,从事多年软件开发,在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战,博主也曾写过优秀论文,查重率极低,在这方面有丰富的经验✌

博主作品:《Java项目案例》主要基于SpringBoot+MyBatis/MyBatis-plus+MySQL+Vue等前后端分离项目,可以在左边的分类专栏找到更多项目。《Uniapp项目案例》有几个有uniapp教程,企业实战开发。《微服务实战》专栏是本人的实战经验总结,《Spring家族及微服务系列》专注Spring、SpringMVC、SpringBoot、SpringCloud系列、Nacos等源码解读、热门面试题、架构设计等。除此之外还有不少文章等你来细细品味,更多惊喜等着你哦

🍅uniapp微信小程序🍅面试题软考题免费使用,还可以使用微信支付,扫码加群。由于维护成本问题得不到解决,可能将停止线上维护。

🍅文末获取联系🍅精彩专栏推荐订阅👇🏻👇🏻 不然下次找不到哟

Java项目案例《100套》
https://blog.csdn.net/qq_57756904/category_12173599.html
uniapp小程序《100套》

https://blog.csdn.net/qq_57756904/category_12173599.html

有需求代码永远写不完,而方法才是破解之道,抖音有实战视频课程,某马某千等培训都是2万左右,甚至广东有本科院校单单一年就得3万4年就12万学费,而且还没有包括吃饭的钱。所以很划算了。另外博客左侧有源码阅读专栏,对于求职有很大帮助,当然对于工作也是有指导意义等。在大城市求职,你面试来回一趟多多少少都在12块左右,而且一般不会一次性就通过,还得面试几家。而如果你对源码以及微服务等有深度认识,这无疑给你的面试添砖加瓦更上一层楼。

最后再送一句:最好是学会了,而不是学废了!!

最近在工作开发中遇到了一个小挑战,去掉组件里面的一些文字,研究了好久,原来是树形组件渲染需要一定的时间,需要使用延时才能看到效果。但是去掉后,把一些元素也去掉了,是因为方法用的不对,得使用内嵌的方法去掉。

树形展开/收缩效果消失的原因可能是你在修改 textContent 时,意外破坏了 DOM 结构或事件绑定。以下是一些可能的原因和解决方法:


1. 检查 DOM 结构

修改 textContent 时,可能会覆盖掉某些子元素(例如展开/收缩按钮的图标或事件绑定)。确保你只修改文本内容,而不是整个元素的 HTML。

错误示例:
element.textContent = element.textContent.replace('分组:', '');

如果 element 包含子元素(如按钮图标),textContent 会覆盖所有子元素。

正确示例:
const span = element.querySelector('span'); // 找到包含文本的子元素
if (span) {span.textContent = span.textContent.replace('分组:', '');
}

2. 保留展开/收缩按钮

树形组件的展开/收缩按钮通常是动态生成的,可能是一个 <span> 或 <i> 元素。确保在修改文本内容时,不要覆盖这些按钮。

示例:
document.querySelectorAll('.lee-grid .lee-grid-grouprow-cell').forEach(element => {const textNode = Array.from(element.childNodes).find(node => node.nodeType === Node.TEXT_NODE);if (textNode) {textNode.textContent = textNode.textContent.replace('分组:', '');}
});
解释:
  • element.childNodes:获取元素的所有子节点(包括文本节点和元素节点)。

  • node.nodeType === Node.TEXT_NODE:找到文本节点。

  • 只修改文本节点的内容,避免破坏其他子元素。


3. 使用 innerHTML 替代 textContent

如果文本内容和子元素混合在一起,可以使用 innerHTML 来精确替换文本内容。

示例:
document.querySelectorAll('.lee-grid .lee-grid-grouprow-cell').forEach(element => {element.innerHTML = element.innerHTML.replace('分组:', '');
});
注意:
  • innerHTML 会重新解析 HTML,可能会导致性能问题或事件绑定丢失。

  • 如果组件依赖于事件委托或动态绑定,innerHTML 可能会破坏这些功能。


4. 重新绑定事件

如果修改 textContent 或 innerHTML 导致事件丢失,可以尝试重新绑定事件。

示例:
function updateTreeText() {document.querySelectorAll('.lee-grid .lee-grid-grouprow-cell').forEach(element => {element.textContent = element.textContent.replace('分组:', '');});// 重新绑定展开/收缩事件bindTreeEvents();
}function bindTreeEvents() {document.querySelectorAll('.lee-grid-group-togglebtn').forEach(button => {button.addEventListener('click', () => {console.log('展开/收缩按钮被点击');// 展开/收缩逻辑});});
}setTimeout(updateTreeText, 3000);

5. 使用组件提供的方法

如果你使用的是某个 UI 组件库(如 Ant Design、Element UI 等),通常会有内置的方法来修改文本内容,而不破坏组件的功能。

示例:Ant Design Tree
const treeData = [{title: '分组:测试001',key: '1',children: [{title: '子节点 1',key: '1-1',},],},
];// 去掉“分组”字样
const newTreeData = treeData.map(node => {return {...node,title: node.title.replace('分组:', ''),};
});// 更新树形组件
treeRef.current.updateTreeData(newTreeData);

6. 调试工具检查

使用浏览器的开发者工具(F12)检查 DOM 结构,确认修改后的元素是否仍然包含展开/收缩按钮。

  • 打开开发者工具,切换到 Elements 面板。

  • 找到 .lee-grid-grouprow-cell 元素,检查其子元素是否完整。

  • 如果按钮丢失,说明修改方式有问题。


7. 延迟修改

如果组件在初始化时需要一些时间完成渲染,可以增加延迟时间。

示例:
setTimeout(() => {document.querySelectorAll('.lee-grid .lee-grid-grouprow-cell').forEach(element => {const textNode = Array.from(element.childNodes).find(node => node.nodeType === Node.TEXT_NODE);if (textNode) {textNode.textContent = textNode.textContent.replace('分组:', '');}});
}, 5000); // 延迟 5 秒执行

总结

  • 避免覆盖子元素:确保只修改文本内容,而不是整个元素的 HTML。

  • 保留展开/收缩按钮:检查 DOM 结构,确保按钮未被覆盖。

  • 重新绑定事件:如果事件丢失,重新绑定展开/收缩事件。

  • 使用组件方法:如果使用 UI 组件库,优先使用内置方法。

  • 调试工具检查:使用开发者工具确认 DOM 结构是否完整。

通过以上方法,你应该能够解决树形展开/收缩效果消失的问题!

3

相关文章:

文档操作方法得合理使用

博主介绍&#xff1a;✌全网粉丝5W&#xff0c;全栈开发工程师&#xff0c;从事多年软件开发&#xff0c;在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战&#xff0c;博主也曾写过优秀论文&#xff0c;查重率极低&#xff0c;在这方面有丰富的经验…...

Python asyncIO 面试题及参考答案 草

目录 如何正确定义一个协程函数?直接调用协程会引发什么问题? 使用 async def 定义的协程与普通函数执行流程有何本质区别? 解释 asyncio.run () 的作用及与手动管理事件循环的差异 为什么协程中必须使用 await 而非 yield 挂起操作? 写出通过 async for 实现异步迭代器…...

计算机网络——交换机

一、什么是交换机&#xff1f; 交换机&#xff08;Switch&#xff09;是局域网&#xff08;LAN&#xff09;中的核心设备&#xff0c;负责在 数据链路层&#xff08;OSI第二层&#xff09;高效转发数据帧。它像一位“智能交通警察”&#xff0c;根据设备的 MAC地址 精准引导数…...

matlab和FPGA联合仿真时读写.txt文件数据的方法

在FPGA开发过程中&#xff0c;往往需要将MATLAB生成的数据作为原始激励灌入FPGA进行仿真。为了验证FPGA计算是否正确&#xff0c;又需要将FPGA计算结果导入MATLAB绘图与MATLAB计算结果对比。 下面是MATLAB“写.txt”、“读.txt”&#xff0c;Verilog“读.txt”、“写.txt”的代…...

解锁DeepSpeek-R1大模型微调:从训练到部署,打造定制化AI会话系统

目录 1. 前言 2.大模型微调概念简述 2.1. 按学习范式分类 2.2. 按参数更新范围分类 2.3. 大模型微调框架简介 3. DeepSpeek R1大模型微调实战 3.1.LLaMA-Factory基础环境安装 3.1大模型下载 3.2. 大模型训练 3.3. 大模型部署 3.4. 微调大模型融合基于SpirngBootVue2…...

【分布式】聊聊分布式id实现方案和生产经验

对于分布式Id来说&#xff0c;在面试过程中也是高频面试题&#xff0c;所以主要针对分布式id实现方案进行详细分析下。 应用场景 对于无论是单机还是分布式系统来说&#xff0c;对于很多场景需要全局唯一ID&#xff0c; 数据库id唯一性日志traceId 可以方便找到日志链&#…...

uniapp或者vue 使用serialport

参考https://blog.csdn.net/ykee126/article/details/90440499 版本是第一位&#xff1a;否则容易编译失败 node 版本 18.14.0 npm 版本 9.3.1 electron 版本 30.0.8 electron-rebuild 版本 3.2.9 serialport 版本 10.0.0 需要python环境 main.js // Modules to control app…...

机器学习12-视觉识别任务

机器学习12-视觉识别任务 分类语义分割滑动窗口滑动窗口的实现思路优点缺点现代替代方法 全卷积&#xff08;Fully Convolutional Networks, FCN&#xff09;FCN 的工作原理FCN 的性能优势FCN 的应用案例FCN 的局限性改进方向下采样可学习的上采样:转置卷积 目标检测区域建议Se…...

使用paramiko爆破ssh登录

一.确认是否存在目标主机是否存在root用户 重跑 CVE-2018-15473用户名枚举漏洞 检测&#xff1a; import paramiko from paramiko.ssh_exception import AuthenticationExceptiondef check_user(username, hostname, port):ssh paramiko.SSHClient()ssh.set_missing_host_key…...

游戏引擎学习第146天

音高变化使得对齐读取变得不可能&#xff0c;我们可以支持循环声音了。 我们今天的目标是完成之前一段时间所做的音频代码。这个项目并不依赖任何引擎或库&#xff0c;而是一个教育项目&#xff0c;目的是展示从头到尾运行一个游戏所需要的全部代码。无论你对什么方面感兴趣&a…...

装饰器模式--RequestWrapper、请求流request无法被重复读取

目录 前言一、场景二、原因分析三、解决四、更多 前言 曾经遇见这么一段代码&#xff0c;能看出来是把request又重新包装了一下&#xff0c;核心信息都不会改变 后面了解到这叫 装饰器模式&#xff08;Decorator Pattern&#xff09; &#xff1a;也称为包装模式(Wrapper Pat…...

【算法题】小鱼的航程

问题&#xff1a; 分析 分析题目&#xff0c;可以看出&#xff0c;给你一个开始的星期&#xff0c;再给一个总共天数&#xff0c;在这些天内&#xff0c;只有周六周日休息&#xff0c;其他全要游泳250公里。 那分支处理好啦 当星期为6时&#xff0c;需要消耗2天&#xff0c;…...

视频录像机视频通道是指什么

视频录像机的视频通道是指摄像机在监控矩阵或硬盘录像机设备上的视频输入的物理位置。 与摄像头数量关系&#xff1a;在视频监控系统中&#xff0c;有多少个摄像头就需要多少路视频通道&#xff0c;通道数量决定了视频录像机可接入摄像头的数量&#xff0c;一般硬盘录像机有4路…...

RISC-V医疗芯片工程师复合型转型的路径与策略

从RISC-V到医疗芯片:工程师复合型转型的路径与策略 一、引言 1.1 研究背景 在科技快速发展的当下,芯片技术已然成为推动各行业进步的核心驱动力之一。其中,RISC-V 架构作为芯片领域的新兴力量,正以其独特的优势迅速崛起,对整个芯片产业的格局产生着深远影响。RISC-V 架…...

《Gradio : AI awesome-demos》

《Gradio : AI awesome-demos》 This is a list of some wonderful demos & applications built with Gradio. Heres how to contribute yours! &#x1f58a;️ Natural language processing Demo name (link to demo)input type(s)output type(s)status badgeruDALL-ET…...

DeepSeek R1-7B 医疗大模型微调实战全流程分析(全码版)

DeepSeek R1-7B 医疗大模型微调实战全流程指南 目录 环境配置与硬件优化医疗数据工程微调策略详解训练监控与评估模型部署与安全持续优化与迭代多模态扩展伦理与合规体系故障排除与调试行业应用案例进阶调优技巧版本管理与迭代法律风险规避成本控制方案文档与知识传承1. 环境配…...

javascript实现生肖查询

今年是农历乙巳年&#xff0c;蛇年&#xff0c;今天突发奇想&#xff0c;想知道公元0年是农历什么年&#xff0c;生肖是什么。没想到AI给我的答复是&#xff0c;没有公元0年。我瞬间呆愣&#xff0c;怎么可能&#xff1f;后来详细查询了一下&#xff0c;还真是没有。具体解释如…...

UE5从入门到精通之如何创建自定义插件

前言 Unreal 的Plugins插件系统中有很多的插件供大家使用,包括官方的和第三方的,这些插件不仅能帮我我们实现特定功能,还能够提升我们的工作效率。 所以我们今天就来自己创建一个自定义插件,如果我们想实现什么特定的功能,我们也可以发布到商店供大家使用了。 创建插件 …...

《今日AI-人工智能-编程日报》

一、AI行业动态 AI模型作弊行为引发担忧 最新研究表明&#xff0c;AI在国际象棋对弈中表现出作弊倾向&#xff0c;尤其是高级推理模型如OpenAI的o1-preview和DeepSeek的R1模型。这些模型通过篡改代码、窃取棋路等手段试图扭转战局&#xff0c;且作弊行为与其智能水平正相关。研…...

sanitizer和valgrind

sanitizer sanitizer使用 Valgrind valgrind使用 使用上sanitizer加编译选项即可 发现sanitizer程序要正常退出才能给出分析&#xff0c;ctrlc退出不行&#xff0c;valgrind ctrlc退出也可以给出分析...

手游刚开服就被攻击怎么办?如何防御DDoS?

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

工程地质软件市场:发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...