网站建设与管理是课程,上海网站建设公司哪家好,六安网站优化,wordpress的memcached最近遇到一个要在elemen-ui的el-table放一个树结构的表数据 但是因为数据实在过多#xff0c;而且列也有四五列#xff0c;还有操作列 dom操作频繁导致页面非常的卡顿
网上看了很多种方法以及elementui的官方方法 使用lazy和load方法终于解决
对应el-table
el-table v…最近遇到一个要在elemen-ui的el-table放一个树结构的表数据 但是因为数据实在过多而且列也有四五列还有操作列 dom操作频繁导致页面非常的卡顿
网上看了很多种方法以及elementui的官方方法 使用lazy和load方法终于解决
对应el-table
el-table v-ifrefreshTable v-loadingloading :datalist row-keyid lazy :loadload :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.datathis.listCopy JSON.parse(JSON.stringify(res.data)) // 备份的全量数据this.list.map(item {if(item.children.length 0) {item.hasChildren trueitem.children []}})this.loading false;});},2、load方法
递归查找备份的全量数据找到对应的children数据将children数据返回
// 树结构获取数据load(tree, treeNode, resolve) {// 查找子节点数据function findNodeById (node, id) {// 找到对应id数据if (node.id id) {// 拷贝当前节点数据const newNode { ...node };if (newNode.children newNode.children.length 0) {// 修改查找到的对应id的children数据把找到的数据里面的children数据置空并设置hasChildrennewNode.children newNode.children.map(child {return {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;}}}return null;}const foundNode findNodeById(this.listCopy[0], tree.id);console.log(foundNode);resolve(foundNode)},
