el-table 多层展开大量数据卡顿

1、为el-table增加懒加载功能，:load=“load”

<el-table
    :data="tableData"
    row-key="id"
    :header-cell-style="{ color: '#333333' }"
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    :load="load"
    lazy>
    <template slot="empty">
        <div style="margin-top: 30px">
            <blank></blank>
        </div>
    </template>
    <el-table-column
        prop="enName"
        label="商品类型英文名称"
        header-align="center"
        width="500"
        align="left">
    </el-table-column>
</el-table>

//获取回来的数据初始化
const list = res.data || [];
const listFun = (ele, level) => {
    //因为系统最多能添加三级，增加了叶子节点
    if (level >= 3) {
        ele.leafFlag = true;
    } else {
        ele.leafFlag = false;
    }
    if (ele.children && ele.children.length > 0) {
        level = level + 1;
        ele.children.map((childEle) => {
            listFun(childEle, level);
        });
    } else {
        delete ele.children;
    }
};
list.map((element) => {
    let level = 1;
    listFun(element, level);
});


//备份所有的数据
this.tableDataCopy = list;
const listCopy = JSON.parse(JSON.stringify(list));
//初始化表格展示一级类目
this.tableData = listCopy.map((item) => {
    item.hasChildren = item.children && item.children.length > 0;
    item.children = null;
    item.levelIdList = [item.id];
    return item;
});

//懒加载方法
load (row, treeNode, resolve) {
    // 层级关系备份
    const idCopy = JSON.parse(JSON.stringify(row.levelIdList))
    // 查找下一层数据
    let resolveArr = this.tableDataCopy
    let id
    // eslint-disable-next-line
    while (id = row.levelIdList.shift()) {
        const tarItem = resolveArr.find(item => item.id === id);
        tarItem.loadedChildren = true
        resolveArr = tarItem.children
    }

    // 处理下一层数据的属性
    resolveArr = JSON.parse(JSON.stringify(resolveArr))
    resolveArr.forEach(item => {
        item.hasChildren = item.children && item.children.length > 0;
        item.children = null;
        // 此处需要深拷贝，以防各个item的levelIdList混乱
        item.levelIdList = JSON.parse(JSON.stringify(idCopy))
        item.levelIdList.push(item.id)
    })

    // 标识已经加载子节点
    row.loadedChildren = true
    // 渲染子节点
    resolve(resolveArr)
},

参考：https://www.jianshu.com/p/53092c00a380，查询数据方便了

2、懒加载的数据变更之后如何手动刷新

重新渲染已经展开的子节点的数据

//结合上面的多层级懒加载功能
const list = res.data || [];
const listFun = (ele, levelIdList, level) => {
    //levelIdList：层级的id，[rootId、parentId]
    ele.levelIdList = JSON.parse(JSON.stringify(levelIdList));
    ele.levelIdList.push(ele.id);
    //需求是不能大于三级，设置了叶子节点
    if (level >= 3) {
        ele.leafFlag = true;
    } else {
        ele.leafFlag = false;
    }

    if (ele.children && ele.children.length > 0) {
        level = level + 1;
        ele.children.map((childEle) => {
            listFun(childEle, ele.levelIdList, level);
        });
    } else {
        delete ele.children;
    }
};
list.map((element) => {
    let level = 1;
    listFun(element,[], level);
});

this.tableDataCopy = list; //备份所有数据
const listCopy = JSON.parse(JSON.stringify(list));
this.tableData = listCopy.map((item) => {
    item.hasChildren = item.children && item.children.length > 0;
    item.children = null;
    item.levelIdList = [item.id]
    return item;
});

// 修改数据后重新加载节点
reloadNode(row) {
    const { lazyTreeNodeMap, treeData } =  this.$refs.listTable['store'].states;
    let resolveArr = this.tableDataCopy;
    //找到相应的父节点并且渲染已经展开的节点
    row.levelIdList.map((id) => {
        if(treeData[id]){
            const parentItem = resolveArr.find(item => item.id == id);
            resolveArr = parentItem.children || [];
            this.$set(lazyTreeNodeMap, id, []);
            if (resolveArr.length) {
                // 处理下一层数据的属性
                resolveArr = JSON.parse(JSON.stringify(resolveArr))
                resolveArr.forEach(item => {
                    item.hasChildren = item.children && item.children.length > 0;
                });
                this.$set(lazyTreeNodeMap, id, JSON.parse(JSON.stringify(resolveArr)));
                this.$set(treeData[id], "loading", false);
                this.$set(treeData[id], "loaded", true);
                this.$set(treeData[id], "expanded", true);
            } else {
                treeData[id].hasChildren = false;
            }
        }
    });
},

async handleInput(row) {
    console.log(row.sortNo, row.enName, row);
    //提交数据接口
    await ...
    //获取数据
    await ...
    this.reloadNode(row);
}