一、问题描述:

vue-element 使用树形结构的table,即可收缩的table时,由于设置lazy懒加载,导致无法在修改或删除child子列表后实时刷新。

二、问题分析:

由于官方文档并没有提供相关刷新方法,需要我们自己来实现。

实现刷新的关键点在于resolve方法

于是我们在load绑定的方法中需要将resolve保存下来,

三、具体实现:

第一步:首先在data中定义一个map

 maps: new Map(),

第二步:在load绑定的方法中保存,通过父级id作为key,将节点的数据,和resolve保存在map中

this.maps.set(row.id, { row, treeNode, resolve })

第三步:定义一个刷新子列表的方法

refresh(parentId) {

// 根据父级id取出对应节点数据

const { row, treeNode, resolve } = this.maps.get(parentId)

this.$set(this.$refs.multipleTable.store.states.lazyTreeNodeMap, parentId, [])

if (row) {

this.loadTree(row, treeNode, resolve)

}

},

第四步:注意一个变量名称 this.$refs.multipleTable需要配置到table中

  <el-table
        ref="multipleTable"
        :data="tableData"
        style="width: 100%"
        row-key="id"
        border
        lazy
        :load="loadTree"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >

第五步:在删除或修改成功后,根据实际情况调用fresh方法刷新子列表,或调用其他方法刷新父列表

完美收工,亲测可用

 

Logo

前往低代码交流专区

更多推荐