0


优化elemen-ui的el-table的tree树结构因数据过多卡顿问题

最近遇到一个要在elemen-ui的el-table放一个树结构的表数据
但是因为数据实在过多,而且列也有四五列,还有操作列
dom操作频繁导致页面非常的卡顿

网上看了很多种方法以及elementui的官方方法
使用lazy和load方法终于解决

对应el-table

<el-table v-if="refreshTable" v-loading="loading":data="list" row-key="id"lazy:load="load":tree-props="{children: 'children', hasChildren: 'hasChildren'}">

一、获取后端数据

1、设置一份list展示,为了不全部渲染导致页面卡顿,将list的children数据置空,再设置hasChildren 为true表示有展开数据
2、完全拷贝一份数据 listCopy 保存下来,后面查找子节点

getList(){this.loading =true;//获取后端接口数据listOrgAll(this.queryParams).then(res=>{this.list = res.data
        this.listCopy =JSON.parse(JSON.stringify(res.data))// 备份的全量数据this.list.map(item=>{if(item.children.length >0){
                item.hasChildren =true
                item.children =[]}})this.loading =false;});},

2、load方法

递归查找备份的全量数据,找到对应的children数据,将children数据返回

// 树结构获取数据load(tree, treeNode, resolve){// 查找子节点数据functionfindNodeById(node, id){// 找到对应id数据if(node.id === id){// 拷贝当前节点数据const newNode ={...node };if(newNode.children && newNode.children.length >0){// 修改查找到的对应id的children数据,把找到的数据里面的children数据置空,并设置hasChildren
                    newNode.children = newNode.children.map(child=>{return{...child,//id: child.id,//name: child.name,//parentId: child.parentId,// 设置hasChildren判断是否显示展开按钮hasChildren: child.children.length >0?true:false,children:[]// 置空子节点};});}return newNode.children;}// 递归查找每一层的children数据if(node.children && node.children.length >0){for(let i =0; i < node.children.length; i++){const result =findNodeById(node.children[i], id);if(result){return result;}}}returnnull;}const foundNode =findNodeById(this.listCopy[0], tree.id);
        console.log(foundNode);resolve(foundNode)},
标签: ui vue.js 前端

本文转载自: https://blog.csdn.net/qq_44179024/article/details/136058117
版权归原作者 大只兔 所有, 如有侵权,请联系我们删除。

“优化elemen-ui的el-table的tree树结构因数据过多卡顿问题”的评论:

还没有评论