el-table lazy-treeモードを使用すると、データリロードノードのtreeデータが更新されないという問題があります.

1516 ワード

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