树形table 10w+数据每次点击要十几秒 懒加载解决点击卡顿

el-table
树形table 10w+数据每次点击要十几秒 懒加载解决点击卡顿

//vue 表头要增加lazy :load="load"
<el-table
          lazy
          stripe
          border
          ref="table"
          row-key="id"
          :load="load"
          :data="tableData"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" 
          style="width: 100%"
          :height="tableHeight"
        >

请求树
handleQuery() {
      //GetTree为数据接口
      GetTree().then(res => {
        if (res.errorCode === "000000") {
            this.total = res.data.length
            //备份所有的数据
            const list = res.data || [];
            const listFun = (ele, level) => {
                //因为系统最多能添加五级，增加了叶子节点
                if (level >= 5) {
                    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)
},

无需等待 点击一下就出来了