一、问题描述 element ui的table组件设置成懒加载时,遇到数据表格需要更新、删除等操作,子节点不会自动更新。 二、解决思路 刷新数据,就是重新调用load(),通过map记录已展开的节点,需要刷新数据时,取出对应treeNode,调用load()进行数据刷新。 三、代码实现(VUE) exportdefault{ data() {return{ map:newMap(), }...
首先,懒加载时候会遇到增删改子节点。 但是,子节点增删改后不刷新视图(重新加载数据不更新页面)。 而且,element没给出刷新视图的方法。 所以,需要手动定义树表格的刷新方法。 源码解释请看以上链接,我也是先看到上面的链接再去看源码的。。 首先定义表格树结构懒加载: <el-table ref="multipleTable" v-loading="...
this.$set(this.$refs.table1.store.states, "lazyTreeNodeMap", {}); this.$set(this.$refs.table1.store.states, "treeData", {}); 1. 2. 最好的解决办法就是:找到了打开子节点数据懒加载时,更新数据的关键: this.$set(lazyTreeNodeMap, key, data); lazyTreeNodeMap: 就是this.$refs.table....
注意看ref="multipleTable" 这个是element定义在this.$refs中的一个键名,有很大用一定要 其次在data中定义一个map对象用来保存当前已经打开过的懒加载数据,以及在methods中定义个懒加载的方法,方法中要给map添值: data(){ return{ loadNodeMap: new Map() /**保存懒加载节点 */, } }, methods:{ loadChild...
所以，需要⼿动定义树表格的刷新⽅法。源码解释请看以上链接，我也是先看到上⾯的链接再去看源码的。。⾸先定义表格树结构懒加载：<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方法去调接口查子节点数据。
lazy // 是否懒加载子节点数据 :load="lazyLoading" // 懒加载 :default-expand-all="true" //是否默认展开所有行 > <el-table-column label="部门名称" prop="deptName" :show-overflow-tooltip="true" > </el-table-column> </el-table>
Vue+Element中Table懒加载,新增、删除操作后手动更新 今天开发一个自动分类管理系统中行业类型管理,使用table tree 进行节点懒加载,遇到的问题是:使用load 进行懒加载后在tableData中是取不到子节点数据,所以在为某个节点新增了子节点后无法实现刷新,想到使用刷新真个tableData但是感觉不对(刷新整个源数据太浪费资源了...
搜索Vue+Element中Table懒加载删除后实现数据动态更新 找了好久,我这需求 懒加载 默认展开第一项 有用 回复 半块苹果 3282315 发布于 2021-09-10 可以存到 map 里面,调用的时候去查找。 data () { map: new Map() }, methods: { load () { // 保存 { row, treeNode, resolve } 以备调用 load...
element 树形表在懒加载模式下官方没有提供实时局部刷新节点的方法 在tree.js中找到懒加载关键的一个方法 this.$set(lazyTreeNodeMap, key, data) lazyTreeNodeMap:this.$refs.table.store.states.lazyTreeNodeMap key:就是table-key data:节点的children数组 ...