苏州免费自助建站网站建设,厦门官网建设公司,wordpress主题配置,西部网站管理助手 伪静态博主介绍#xff1a;✌全网粉丝5W#xff0c;全栈开发工程师#xff0c;从事多年软件开发#xff0c;在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战#xff0c;博主也曾写过优秀论文#xff0c;查重率极低#xff0c;在这方面有丰富的经验… 博主介绍✌全网粉丝5W全栈开发工程师从事多年软件开发在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战博主也曾写过优秀论文查重率极低在这方面有丰富的经验✌ 博主作品《Java项目案例》主要基于SpringBootMyBatis/MyBatis-plusMySQLVue等前后端分离项目可以在左边的分类专栏找到更多项目。《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
