el-table懒加载对子节点增删查改表格数据不刷新问题

已于 2022-04-11 16:25:05 修改
阅读量335 收藏
点赞数
分类专栏： element 文章标签： javascript zookeeper html
于 2021-09-24 15:25:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44969308/article/details/120455903
版权

为每个节点增加一个临时ID作为row-key

<el-table :data="companyList" v-loading="listLoading" border row-key="tempId" lazy :load="load">

this.companyList[index].tempId = Math.random() * 1000000 + 'companyTempId'

data[index].tempId = Math.random() * 1000000 + 'departmentTempId'
齐洛格德
关注
专栏目录
vue2/3 - element表格组件el-table实现懒加载树型(上下级)数据、默认展开和隐藏层级，支持对表格进行修改|新增|删除，解决完成操作后树节点不刷新问题（提供示例代码，一键复制开箱即用
高级前端工程师
03-21 3547
vue2，vue3，elementui，elementPlus，el-table，Table表格组件，表格懒加载数据，element table表格数中的树形结构懒加载，增加后数据不同步更新问题，el-table树形与el-tree树形结构的一键折叠与展开，elementui中el-tree懒加载数据 默认展开最外层节点，Element-plus Table组件树表结构默认展开一级目录，vue实现element table表格树形结构-使用懒加载时-解决子节点增删改后，不刷新子节点数据问题，解决el-tre
Ext.Net 1.x_Ext.Net.常用控件属性集合
德仔
09-14 5234
转自：http://blog.csdn.net/lulu_jiang/article/category/669748  Ext_数字输入框_Ext.form.NumberField: /* Ext.form.NumberField独有配置表: allowDecimals             Boolean             是否允许输入小数(默认true) allo
vue-表格树结构-懒加载-解决子节点修改删除后，不刷新的问题
ccc_cccc_ccc的博客
05-25 2782
问题： 子节点修改删除后，子节点视图不刷新 初次解决办法： export default { inject: ['sizeReload'], } 子节点变化后执行： this.sizeReload() 子节点变化后，进行页面的刷新操作，但是刷新后，节点会自动折叠，且全部刷新用户体验不好。 最终解决办法： 效果图： 点击展开： // 数据懒加载 load(tree, treeNode, resolve) { const pid = tree.tid; this.m
vue的element ui使用el-table组件实现懒加载树、默认自动展开层级（一层，二层）、并且解决新增、删除、修改之后树节点不刷新问题
weixin_41549971的博客
01-10 6492
vue的element ui使用el-table组件实现懒加载树、默认自动展开层级（一层，二层）、并且解决新增、删除、修改之后树节点不刷新问题
vue实现elementUI table表格树形结构-使用懒加载时-解决子节点增删改后，不刷新子节点数据问题
inticaler的博客
06-16 3100
在使用element-ui的table组件时，使用树形结构，并使用了懒加载，可出现了一个问题，在对当前节点添加一个子节点数据，或删除一个子节点数据时，当前节点的子节点数据并不自动刷新出来。element-ui官方没有提供实时刷新子节点数据的方法。
el-table使用lazy模式 数据更新节点中的数据不更新问题
岁月清浅， 不落痕迹
07-20 3137
el-table使用lazy模式 数据更新节点中的数据不更新问题 在使用el-table组件的lazy懒加载时,load方法可以实现子节点的懒加载。但是当table的数据重新渲染而key值并没有改变时,会发现展开状态下的子节点数据无法更新， 为了解决这问题，通过看源代码发现，可以改变这两个值在数据重新渲染的时候更新子节点的状态信息 this.$refs.table.store.states.treeData[`${item}Team`].loaded = false；
Vue+Element中Table懒加载删除或编辑数据后不动态更新
Luo的博客
02-24 5335
1.问题的来源 在Element中使用Table树形数据懒加载(设置 lazy 属性为 true)模式。框架会通过row-key指定的属性来缓存操作者异步请求的数据 ，所以我们进行删除或编辑操作后重新请求数据，框架会优先通过row-key指定的id来检查是否已存在，如果数据存在使用旧数据，如果数据不存在使用新数据，所以table中查看更新后的数据发生没有变化。下面是实际演示例子： 代码: <template> <el-table ref="table" :dat.
web树状结构显示问题
ass3326524的专栏
09-18 5198
<br />在web开发中的树状视图技术<br />树型数据模型在现实生活中应用相当广泛，从超市的商品分类到政府的组织结构无不都是”树形”的。在实际的项目开发中也经常需要显示这种结构。比如，在树状视图上给一个单位的职工赋予系统操作权限。<br />         在web开发中实现树状显示在技术上主要有以下两种方案<br />1.      采用js操作DOM模型构建树状视图<br />2.      采用HTML来表达树的节点,使用js和css来赋予动态效果<br /> <br />第一种方案的典型示例
11 【Teleport CSS功能】
DSelegent的博客
08-09 566
11 【Teleport CSS功能】
Vue2-Vue3.0学习笔记（2021年黑马程序员最新视频）
m0_67402588的博客
03-09 1995
Vue 介绍 什么是 vue ？ 构建用户界面 用 vue 往 html 页面中填充数据，非常的方便 框架 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！ 要学习 vue，就是在学习 vue 框架中规定的用法！ vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库 只有把上面老师罗列的内容掌握以后，才有开发 vue 项目的能力！ vue 的两个特性 数据驱动视图： 数据的变化会驱动视图自动更新 好处：程序员只管把数据维护好，那么页面
element-ui table树形表格懒加载 修改数据后没有重新load子集数据的解决办法
lxl5lxl的博客
01-20 2510
element-ui table树形表格懒加载 修改数据后没有重新load子集数据 element-ui table树形表格懒加载 修改数据后没有重新load子集数据 添加:key="Math.random()"可以实现每次展开时调用:load="loadChild"方法
vue实现table表格树结构-使用懒加载时-解决子节点增删改后，不刷新子节点数据问题
爱学习的大雄的博客
03-01 1786
在使用element-ui的table组件时，使用树形结构，并使用了懒加载，可出现了一个问题，在对当前节点添加一个子节点数据，或删除一个子节点数据时，当前节点的子节点数据并不自动刷新出来。这条代码上，那原因就是我res.data.dataMap.menuListPage.list中的数据有问题，接口返回了查询了错误的子节点数据，明明当前节点下的所有子节点只有2条，却查出了10多条，所以报内存溢出。修改后端bug后，查出正确的子节点list，刷新子节点就没问题了。本人采用第三种解决方案。
解决Vue3+element树形结构表格，子级无刷新
weixin_45871985的博客
03-01 3573
项目场景： 因为数据量比较多，所以使用树形数据与懒加载，子级不涉及增删改就会参在问题。 解决： 首先创建一个map let maps = ref(new Map()); 在展开回调时存进map里 删除时分两种情况：1子级的数据大于1条 那就直接调展开回调 2.仅剩一条这时如果老套路显然不对 需要直接赋值【】，因为赋值空了 页面会刷新 刷新后这条数据就没。详细见代码 不知道描述的是否清楚。 ...
解决el-table懒加载树新增、删除、修改节点不刷新问题
qq_42383970的博客
07-01 4165
el-table懒加载树时薪新增、删除、修改节点即时刷新
el-table-tree使用懒加载时，内部节点不更新的问题
chuanjongkoujin的博客
02-06 1106
增加的时候，是更新此节点以下的内容，所以要找此节点的map,然后调用load函数，这就又存在了一个问题当我没有点击节点时，map函数中并没有存储此节点的map，这就会导致数据不更新，所以要判断当没有子节点的map时，调用父节点map,然后load调用。row（要改变的节点行数据）,treeNode（节点）,resolve(element内部封装的回调，将请求回来的数据放到页面上），哪个节点需要更新就手动调用load并将相应的行数据传参，这样就能更新了。1.向后端请求更新数据，2.更新前端页面。
el-table树形表格懒加载 子节点修改数据后局部刷新
weixin_49905445的博客
02-16 1262
el-table树形表格懒加载 子节点修改数据后局部刷新。给table绑定ref load方法用于实现懒加载。data中定义maps:new Map()在子节点增删改查后 调用局部刷新方法。
Element Plus + Vue3 踩坑 -- el-Table树形数据懒加载新增、编辑、删除子集不实时刷新问题
weixin_42560976的博客
03-25 3387
问题一、设置 Table 的 lazy 属性为 true 与加载函数 load，可实现懒加载树形数据。但在展开子集后新增、编辑、删除，却不实时更新数据。问题二、解决以上问题后，发现当子集只剩一条数据时，删除这条数据依旧不触发数据刷新。
el-table 懒加载 局部更新
qq_43436160的博客
04-28 958
vue的element ui使用el-table组件实现懒加载树、默认自动展开层级（一层，二层）、并且解决新增、删除、修改之后树节点不刷新问题
el-table树结构懒加载---行内增删改无法自动更新问题
qq_46113805的博客
08-16 2045
效果： 使用element-ui官网的代码实现编辑和删除后，页面并没有及时更新，网上查阅资料后，发现解决方法：load懒加载的时候把参数(tree,treeNode,resolve)存起来(可以存到data中或者用newMap方式存),编辑/删除成功后用存起来的参数调用load函数再加载一次 但是此时出现了新的问题：如果先点当前行的编辑/删除，再点击懒加载，那么页面可以自动更新，但是如果先点击第二级的懒加载，再点第二级的编辑/删除，就无法自动更新(因为点击第二级懒加载时(tree...
el-table懒加载小三角重新刷新
最新发布
07-30
"el-table"是Element UI库中的表格组件，它支持懒加载（lazy loading），即当数据太多时，不会一次性加载所有数据，而是在用户滚动到某个位置时动态加载。默认情况下，当数据未完全加载时，表头的行尾会出现一个小...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值