element table懒加载 按需加载方法

标题: el-table load懒加载 数据刷新节点不刷新的问题。

前言： 花了1天半时间才搞定入坑了。从一开始使用load到把每个展开过的父节点记录下来刷新的时候把子节点先加载进去然后全局把所有子节点都关闭。（功能是实现了，但是老大发话了要是所有节点都张开过刷新的时候就会影响性能，没办法继续往下，找来许久找不到方法，睡了一觉发现是个很小白的原因 刷新的时候key没有更新所以起不到刷新的效果） 下面是2种动态刷新方式的代码。
第一种： 张开节点记录下来（适合表格数据的增删改查）
1.在data定义： loadNodeMap: new Map(),
// 在load方法里 判断一下loadNodeMap里是否存在key值不存在就保存
2.if (!this.loadNodeMap.has(tree.key)) {
const key = tree.key
// 将当前操作保存起来
this.loadNodeMap.set(key, {tree, treeNode, resolve})
// 下面可以忽略是我的接口参数
that.dataparams.orgId = tree.itemId
that.dataparams.financeTag = that.params.financeTag
getPerformancesReport(that.dataparams).then(res => {
if (res) {
resolve(res.data)
}
})
}
3.在操作完表格数据后进行刷新
// callbackRow 是没条表格的数据 row
_reRenderChildrenNodeAfterAdd(callbackRow) {
const key = callbackRow.key;
// 如果刷新的时候有key值的时候
if (this.loadNodeMap.has(key)) {
const {tree, treeNode, resolve} = this.loadNodeMap.get(key);
// 删掉子节点
this.$set(this.$refs.multipleTable.store.states.lazyTreeNodeMap, key, []);
// 加上刷新的子节点
this.load(tree,treeNode,resolve);
}
},
4.关闭所有子节点的方法
fold() {
var els = this.$el.getElementsByClassName(‘el-table__expand-icon el-table__expand-icon–expanded’)
for (var i = 0; i < els.length; i++) {
els[i].click()
}
},
第二种方法：
// 这就很简单了 很久没解决的问题 就缓缓 思维绕进去了。
// 给每个数据的key都加上时间戳这样就保证不会重复，子节点会自动删除 进行懒加载 （适合查询搜索切换）
dataAddTime(data) {
if (data && data.length !== 0) {
var timestamp=new Date().getTime()
for (let i = 0; i < data.length; i++) {
data[i].key = data[i].key + timestamp
}
return data
} else {
return []
}