el-table lazy-treeモードを使用すると、データリロードノードのtreeデータが更新されないという問題があります.
1516 ワード
el−tableコンポーネントを用いて提供されるlazyモードでは、load法はtreeサブノードの怠惰なロードを実現することができる.ただしtableのデータが再レンダリングされkey値が変化しない場合、expand状態のtreeサブノードデータは更新できません
el-tableのソースコードのtree.js
この段落はloadのresolveのソースコードで、treeData[key]の状態が変更されていることがわかりますが、treeコンポーネントexpandはloadのコードが次のように判断します.
したがって、treeData[id]のloadedをfalseに変更して再ロードする必要があり、idはtreeレンダリング設定のkey値、treeDataはel-tableコンポーネントのstoreで取得する必要があり、下のコードでツリーノードのloaded状態を変更することができ、クリックするとloadedリクエスト(itemは格納されたkey値)を再送信することができる
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