element ui 全加载树节点内子项的动态更新

2024-09-02 06:18

本文主要是介绍element ui 全加载树节点内子项的动态更新,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

为了持之以恒的勋章,不得不在9月的最后几天,水几篇原创文章(无奈ing)。本人刚接触element ui,属于白痴一个,如果有更好的的方法,欢迎大神留言交流,感激不尽!!!

其实跟《element ui 懒加载树节点内子项的动态更新》道理大致是一样的。

我们得到选中的的节点,或者说是待更新的节点,手动删掉下面的所有子节点,然后再添加子节点。所有的方法,还是element提供的方法。

function refreshAllLoadTree(theTree, data, selectNode) {if (theTree && selectNode && data) {if (selectNode.nextSibling) {const nextNode = selectNode.nextSiblingtheTree.remove(selectNode.data)theTree.insertBefore(data, nextNode)} else if (selectNode.previousSibling) {const beforeNode = selectNode.previousSiblingtheTree.remove(selectNode.data)theTree.insertAfter(data, beforeNode)} else {const parentNode = selectNode.parenttheTree.remove(selectNode.data)theTree.append(data, parentNode)}} else {console.error('全加载树节点的动态刷新,未传入树或选中的节点!')}
}

theTree 就是通过组件索引得到的tree,直白点也就是 this.$refs.tree

data 是更新过的节点

selectNode是选中的节点(待刷新父节点)

这里面的remove、insertBefore、insertAfter、append都是element 树封装好的方法

上面的方法可以改写一下,也可以写循环的,遍历 selectNode下的children挨个remove删除,再循环向 selectNode内append子节点。那就跟《element ui 懒加载树节点内子项的动态更新》道理是完全一样的。

 

这篇关于element ui 全加载树节点内子项的动态更新的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1129224

相关文章

Java使用Javassist动态生成HelloWorld类

《Java使用Javassist动态生成HelloWorld类》Javassist是一个非常强大的字节码操作和定义库,它允许开发者在运行时创建新的类或者修改现有的类,本文将简单介绍如何使用Javass... 目录1. Javassist简介2. 环境准备3. 动态生成HelloWorld类3.1 创建CtC

MySQL 数据库表操作完全指南:创建、读取、更新与删除实战

《MySQL数据库表操作完全指南:创建、读取、更新与删除实战》本文系统讲解MySQL表的增删查改(CURD)操作,涵盖创建、更新、查询、删除及插入查询结果,也是贯穿各类项目开发全流程的基础数据交互原... 目录mysql系列前言一、Create(创建)并插入数据1.1 单行数据 + 全列插入1.2 多行数据

linux安装、更新、卸载anaconda实践

《linux安装、更新、卸载anaconda实践》Anaconda是基于conda的科学计算环境,集成1400+包及依赖,安装需下载脚本、接受协议、设置路径、配置环境变量,更新与卸载通过conda命令... 目录随意找一个目录下载安装脚本检查许可证协议,ENTER就可以安装完毕之后激活anaconda安装更

SpringBoot加载profile全面解析

《SpringBoot加载profile全面解析》SpringBoot的Profile机制通过多配置文件和注解实现环境隔离,支持开发、测试、生产等不同环境的灵活配置切换,无需修改代码,关键点包括配置文... 目录题目详细答案什么是 Profile配置 Profile使用application-{profil

Nginx进行平滑升级的实战指南(不中断服务版本更新)

《Nginx进行平滑升级的实战指南(不中断服务版本更新)》Nginx的平滑升级(也称为热升级)是一种在不停止服务的情况下更新Nginx版本或添加模块的方法,这种升级方式确保了服务的高可用性,避免了因升... 目录一.下载并编译新版Nginx1.下载解压2.编译二.替换可执行文件,并平滑升级1.替换可执行文件

SQL Server跟踪自动统计信息更新实战指南

《SQLServer跟踪自动统计信息更新实战指南》本文详解SQLServer自动统计信息更新的跟踪方法,推荐使用扩展事件实时捕获更新操作及详细信息,同时结合系统视图快速检查统计信息状态,重点强调修... 目录SQL Server 如何跟踪自动统计信息更新:深入解析与实战指南 核心跟踪方法1️⃣ 利用系统目录

Android Paging 分页加载库使用实践

《AndroidPaging分页加载库使用实践》AndroidPaging库是Jetpack组件的一部分,它提供了一套完整的解决方案来处理大型数据集的分页加载,本文将深入探讨Paging库... 目录前言一、Paging 库概述二、Paging 3 核心组件1. PagingSource2. Pager3.

go动态限制并发数量的实现示例

《go动态限制并发数量的实现示例》本文主要介绍了Go并发控制方法,通过带缓冲通道和第三方库实现并发数量限制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面... 目录带有缓冲大小的通道使用第三方库其他控制并发的方法因为go从语言层面支持并发,所以面试百分百会问到

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

WinForm跨线程访问UI及UI卡死的解决方案

《WinForm跨线程访问UI及UI卡死的解决方案》在WinForm开发过程中,跨线程访问UI控件和界面卡死是常见的技术难题,由于Windows窗体应用程序的UI控件默认只能在主线程(UI线程)上操作... 目录前言正文案例1:直接线程操作(无UI访问)案例2:BeginInvoke访问UI(错误用法)案例