vue实现elementUI table表格树形结构-使用懒加载时-解决子节点增删改后,不刷新子节点数据问题

news2024/12/21 18:40:42

问题发现

在使用element-ui的table组件时,使用树形结构,并使用了懒加载,可出现了一个问题,在对当前节点添加一个子节点数据,或删除一个子节点数据时,当前节点的子节点数据并不自动刷新出来。element-ui官方没有提供实时刷新子节点数据的方法。

img

解决方法

  1. 可以使用window.location.reload();但每次加减一个子节点数据,整个页面都刷新一下实在太不好看。而且节点会自动折叠恢复刚进此页面时的样子。

  2. 第二种,用下面的代码,可以在添加完子节点操作后,收起所有的节点(不展开):

    this.$set(this.$refs.table1.store.states, "lazyTreeNodeMap", {});
    this.$set(this.$refs.table1.store.states, "treeData", {});
    this.$set(this.$refs.table1.store.states, "data", []);
  3. 最好的解决办法就是:找到了打开子节点数据懒加载时,更新数据的关键:

    this.$set(lazyTreeNodeMap, key, data);
    // lazyTreeNodeMap: 就是this.$refs.table.store.states.lazyTreeNodeMapkey:
    // key 就是table-key,相当于父节点数据的id
    // data:就是子节点数据
  4. vewfewf

    this.$set(this.$refs.table1.store.states.lazyTreeNodeMap, xxxList);
    // 业务使用场景:
    // 1、先给table标签添加一个ref="table"
    // 2、在点击父节点要添加一个子节点,或删除一个子节点后,已请求完后台接口后,拿到父节点id,和最新增删后的子节点数据xxxList
    // 3、最后调用 this.$set(this.$refs.table1.store.states.lazyTreeNodeMap, id, xxxList);
    // 根据父节点id更新子节点数据
    
    例如:
    this.$set(this.$refs.table.store.states.lazyTreeNodeMap, pid, list);

 

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

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

相关文章

景联文科技:一文详解关键点标注

关键点标注是计算机视觉领域的一种任务,指的是在图像或视频序列中标注出特定目标的关键点,这些关键点通常是目标的重要特征点或轮廓点,包括但不限于人体关节、面部特征点、车辆零部件等。通过对关键点的标注,可以为后续的目标跟踪…

19. 算法之分治算法

1. 概念 分治算法(divide and conquer)的核心思想其实就是四个字,分而治之 ,也就是将原问题划分成n个规模较小,并且结构与原问题相似的子问题,递归地解决这些子问题,然后再合并其结果&#xff…

微信小程序开发(1)

10分钟入门 - 微信小程序开发 微信小程序详细教程 小程序简介 小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。 小程序技术发展史 WeixinJSBridge.invoke(imagePreview, { 2. current: http://i…

大数据之路书摘:走近大数据——从阿里巴巴学习大数据系统体系架构

文章目录 1.数据采集层2.数据计算层3.数据服务层4.数据应用层 在大数据时代,人们比以往任何时候更能收集到更丰富的数据。但是如果不能对这些数据进行有序、有结构地分类组织和存储,如果不能有效利用并发掘它,继而产生价值,那么它…

SNMP软件及性能监控

SNMP(Simple Network Management Protocol)是一种用于网络管理的协议。通过SNMP,我们可以监测和管理网络设备、服务器等重要设备的性能和状况,从而确保网络的正常运行。但在开始使用之前,需要进行配置,以便…

计算机未来五年最吃香的4个职位,对女生超级友好!

今年计算机毕业的学弟学妹对于找工作感觉到非常焦虑,不知道该哪个方向就业才有出路。很多同学感觉在学校好像什么都学了,又好像什么都没学到,先不说企业会不会招,自己就连投简历的勇气都没有,生怕大把的简历投出去就石…

怎么买美股?有哪些美股购买常见问题?

美股市场是全球最大的股票市场,也是全球最受投资者关注的市场之一。许多投资者都想参与其中,但不知道如何买美股。上文中已经扩列了美股购买的基本规则,继续为大家分享美股购买常见问题的相关知识要点。更深入的认识美股交易。 美股购买常见问…

组装电子产品,如何避免SMT虚焊?

组装电子产品的工厂,主要包括两条生产线:SMT表面组装和DIP插件组装。SMT是把电子元件通过设备,贴到PCB线路板上面,然后通过炉子(一般是指回流焊炉)加热,把元件通过锡膏焊接固定到PCB板上&#x…

【C++】STL的deque容器

目录 3.1deque构造函数 3.2deque赋值操作 3.3deque大小操作 3.4deque插入 3.5deque删除 3.6deque数据存取 3.7deque排序操作 deque(双端队列)是double-ended queue 的一个不规则缩写。deque是具有动态大小的序列容器,可以在两端&#…

遗传算法[GA]

遗传算法 遗传算法 (Genetic Algorithm,GA) 是模拟生物在自然环境中的遗传和进化的过程而形成的自适应 全局优化搜索算法。 遗传算法借鉴了达尔文的进化论和孟德尔的遗传学说。其本质是一种并行、高效、全局搜索的方法, 它能在搜索过程中自动获取和积累…

centos直接部署express

centos直接部署express 以下是在CentOS上部署Express应用程序的一般步骤: 1.安装Node.js 在CentOS系统上安装Node.js。可以使用以下命令安装Node.js: sudo yum install nodejs2.安装npm 安装完Node.js后,还需要安装npm(Node.…

数据库原理与应用第7章作业

数据库原理与应用第7章作业 一. 单选题(共10题,40分)二. 填空题(共3题,15分)三. 简答题(共1题,15分)四. 论述题(共2题,30分) 一. 单选…

测试“背锅侠”?软件测试人究竟背了多少锅?我不再背锅...

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 实际上&#xff0…

多线程并发的一些常见的使用规范

目录 1. 多线程并发使用规范 1.1 指定线程名称 2. 尽量使用线程池 3.不允许使用Executors 4. 正确停止线程 5. 编写可停止的Runnable 6 . Runnable中必须捕获一切异常 7. 可考虑使用ThreadLocal 8. 缩短锁 9. 选择分离锁,分散锁甚至无锁的数据结构 10. 推…

【C/C++】标准库相关题型(一)

文章目录 1. vector底层实现原理1.1 类构成1.2 构造函数1.3 插入元素1.4 删除元素1.5 读取元素1.6 修改元素1.7 释放空间 2. vector内存增长机制2.1 特点2.2 内存增长特性2.3 内存增长过程2.4 内存清理2.5 注意事项 3. vector中reserve和resize的区别3.1 共同点3.2 区别3.3 应用…

在 ZBrush 和 Maya 中创建 Chris Hemsworth 的 3D 肖像

今天瑞云渲染小编给大家带来一篇Marius Prsel分享了 Chris Hemsworth 项目背后的工作过程,详细介绍了角色的头部、面部和头发是如何制作的,并解释了如何在 Arnold 中完成渲染,一起来看看吧! 简介 我的名字是Marius Prsel&#xf…

7个理由:从Java8升级到Java17【翻译】

原文地址: 7 Reasons to Migrate from Java 8 to Java 17 释放吧,Java的全部力量。[手动狗头] 简介 从Java8到Java18,Java已经经历了漫长的发展历程(Java20非长期维护版本)。同时也是从Java 8开始,Java生态系统发生…

【LeetCode热题100】打卡第23天:最小覆盖子集

文章目录 【LeetCode热题100】打卡第23天:最小覆盖&子集⛅前言 最小覆盖🔒题目🔑题解 子集🔒题目🔑题解 【LeetCode热题100】打卡第23天:最小覆盖&子集 ⛅前言 大家好,我是知识汲取者&…

三种方法将Word文档转换为PDF文件格式

如何将Word文档转换为PDF文件格式呢?大家在传输文件时,很多人喜欢使用PDF文件格式,因为它非常稳定,不会出现格式混乱的问题。但有些人可能不知道如何进行转换,今天我将介绍三种转换方法,让我们一起来学习一…

从0开始,精通Go语言Rest微服务架构和开发

说在前面 现在拿到offer超级难,甚至连面试电话,一个都搞不到。 尼恩的技术社区中(50),很多小伙伴凭借 “左手云原生右手大数据”的绝活,拿到了offer,并且是非常优质的offer,据说年…