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

大只兔2024-02-07 22:08

最近遇到一个要在elemen-ui的el-table放一个树结构的表数据

但是因为数据实在过多，而且列也有四五列，还有操作列

dom操作频繁导致页面非常的卡顿

网上看了很多种方法以及elementui的官方方法

使用lazy和load方法终于解决

对应el-table

javascript 复制代码

<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 保存下来，后面查找子节点

javascript 复制代码

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数据返回

javascript 复制代码

// 树结构获取数据
	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数据置空，并设置hasChildren
					newNode.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)
	},