一、问题描述 element ui的table组件设置成懒加载时,遇到数据表格需要更新、删除等操作,子节点不会自动更新。 二、解决思路 刷新数据,就是重新调用load(),通过map记录已展开的节点,需要刷新数据时,取出对应treeNode,调用load()进行数据刷新。 三、代码实现(VUE) exportdefault{ data() {return{ map:newMap(), }...
cTable.value.removeCacheTree(row.id); //重新懒加载一次 loadTree(row, treeNode, resolve); } }; /** * @author ken * @version 1.0 * @param row 刷新子节点数据 * @method removeCacheTree 清除事件 * @description //刷新子节点数据 */ const removeCacheTree=(id)=>{ //通过ref获取table的子...
51CTO博客已为您找到关于element table 树形数据懒加载的相关内容,包含IT学习相关文档代码介绍、相关教程视频课程,以及element table 树形数据懒加载问答内容。更多element table 树形数据懒加载相关解答可以来51CTO博客参与分享和学习,帮助广大IT技术人实现成长和进步。
注意看ref="multipleTable" 这个是element定义在this.$refs中的一个键名,有很大用一定要 其次在data中定义一个map对象用来保存当前已经打开过的懒加载数据,以及在methods中定义个懒加载的方法,方法中要给map添值: data(){ return{ loadNodeMap: new Map() /**保存懒加载节点 */, } }, methods:{ loadChild...
Vue+Element中Table懒加载,新增、删除操作后手动更新 今天开发一个自动分类管理系统中行业类型管理,使用table tree 进行节点懒加载,遇到的问题是:使用load 进行懒加载后在tableData中是取不到子节点数据,所以在为某个节点新增了子节点后无法实现刷新,想到使用刷新真个tableData但是感觉不对(刷新整个源数据太浪费资源了...
所以,需要⼿动定义树表格的刷新⽅法。源码解释请看以上链接,我也是先看到上⾯的链接再去看源码的。。⾸先定义表格树结构懒加载:<el-table ref="multipleTable"v-loading="tableLoading":data="tableData"style="width: 100%"row-key="areaCode"border lazy :load="loadChildTree":tree-props="{ ...
这个属性的意思是,tableData数组的每一项表示树的一个节点,如果该节点有子节点,则子节点数据存在children数组中,hasChildren字段存布尔值,表示该节点有没有子节点。 lazy属性,开启了懒加载,当点开某个子节点时,才会触发load方法去调接口查子节点数据。
后面看到有table的例子(“树形数据与懒加载”),可通过设置lazy属性和load函数来实现。 如下所示: 但整合到项目中,发现load只执行了一次。也就是第二次点击小箭头,是不会发请求的。 这样就会有点问题,因为如果在别的页面更改了展开行的数据,那只能通过刷新页面来更新当前展开行的数据。
搜索Vue+Element中Table懒加载删除后实现数据动态更新 找了好久,我这需求 懒加载 默认展开第一项 有用 回复 半块苹果 3282315 发布于 2021-09-10 可以存到 map 里面,调用的时候去查找。 data () { map: new Map() }, methods: { load () { // 保存 { row, treeNode, resolve } 以备调用 load...
data()中定义一个map对象存放节点信息 load()方法中点击加载子节点时保存信息到maps 删除和修改的函数中传入fu父级id查找到保存在map对象中的节点信息触发一次load()从而达到更新子节点信息的效果