el-table使用lazy-tree模式,数据重载节点中的tree数据不会更新的问题

在使用el-table组件提供的lazy模式中,load方法可以实现tree子节点的懒加载。但是当table的数据重新渲染而key值并没有改变时,会发现expand状态下的tree子节点数据无法更新

在el-table的源码中的tree.js

load(row, treeNode, data => {
          if (!Array.isArray(data)) {
            throw new Error('[ElTable] data must be an array');
          }
          treeData[key].loading = false;
          treeData[key].loaded = true;
          treeData[key].expanded = true;
          if (data.length) {
            this.$set(lazyTreeNodeMap, key, data);
          }
          this.table.$emit('expand-change', row, true);
        });
      }

这一段就是load中resolve的源码,我们可以看到treeData[key]的状态都被修改了,而tree组件expand判断是否load的代码如下

loadOrToggle(row) {
      this.assertRowKey();
      const { lazy, treeData, rowKey } = this.states;
      const id = getRowIdentity(row, rowKey);
      const data = treeData[id];
      if (lazy && data && 'loaded' in data && !data.loaded) {
        this.loadData(row, id, data);
      } else {
        this.toggleTreeExpansion(row);
      }
    },

因此,我们需要修改treeData[id]的loaded为false即可再次加载,id为tree渲染设定的key值，treeData需要通过el-table组件的store获取，通过下方代码即可修改树节点的loaded状态，点击可再次发送loaded请求了（item为存储的key值）

 this.$refs.table['store'].states.treeData[item].loaded = false
 this.$refs.table['store'].states.treeData[item].expanded = false