vue+element-树形table子节点数据实现实时刷新（亲测可用）

一、问题描述：

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方法刷新子列表，或调用其他方法刷新父列表

完美收工，亲测可用