The amount of el-table tree data is too large, causing page stuttering and solving

lazy
:load=“load”
:tree-props=“{children: ‘children', hasChildren: ‘hasChildren'}”

// Template<el-table 
  	  row-key="planId" 
	  ref="table" 
	  :data="tableData" 
	  lazy
	  :load="load"
	  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
	  @selection-change="selectionChange" 
	>
	<el-table-column type="selection" align="center" />
    <el-table-column label="Check details" prop="inspectDetails" />
</table>

// datadata: () => ({ tableData: [], list: [], ids: []}),
//methodmounted() {
	()
}
// Get dataasync search() {
	// This is to clear the lazy loading data to prevent the call method from not updating the page.	this.$set(this.$, "lazyTreeNodeMap", {});
	this.$set(this.$, "treeData", {});
	const { rows } = await API_APPRAISE.APR_EXE_OS_R({
		projectId: this.$,
	});
	// I have grouped the data in this section. If I don't need it, I can skip this. For example, the tree-shaped data obtained from the backend can be directly	//  = rows
	//  = (()).map(item => ({
		// ..item,
		// hasChildren:  &&  > 0,
		// children: null,
		// idList: [],
	// }))
	let group = (rows, 'testOrgan');
	// Back up the data, all data	 = (item => ({
		id: ,
		planId: ,
		children: ()
	}));
	// Display data	 = (()).map(item => ({
		...item,
		// The ids here are the planIds of all children of each node and their own node. I need to pass it to the backend for processing in the future. If you don't need it, you can delete it.		ids: (item),
		// hasChildren means that an arrow icon needs to be displayed		hasChildren:  &&  > 0,
		// Only one layer is displayed		children: null,
		// Remember the hierarchy relationship		idList: [],
	}))
},
// Grouping functiongroupBy(array, key) {
	const groupedData = new Map();
	for (const item of array) {
		const group = item[key];
		if (!(group)) {
			(group, []);
		}
		(group).push(item);
	}
	return (groupedData, ([id, children]) => ({
		id, children
	}));
},
// Lazy loading method, it will be called when clicking drop-download (tree, treeNode, resolve) {
	// Hierarchical relationship backup	const idCopy = (())
	// Find the next layer of data	let resolveArr = 
	for (const planId of ) {
		const tarItem = ((item) =>  === planId);
		if (!tarItem) break;
		resolveArr =  || [];
	}
	// Process the properties of the next layer of data	resolveArr = ((resolveArr))
	(item => {
		 = (item)
		 =  &&  > 0
		 = null
		 = [...idCopy, ]
	})
	// Render child nodes	resolve(resolveArr)
	// If you need to check it, you need to remount each child and then call the checked method	this.$nextTick(() => {
		 = resolveArr
		if (()) {
			(, true)
		}
	})
},
/**
 * getTreeNodes recursive function, used to traverse tree structures
 * @param {Object} node - node object
 * @returns {Array} - Returns an array containing the node planId
 */
getTreeNodes(node) {
	const result = [];

	// traverse the current node and get the planId	if () {
		();
	}

	// traverse child nodes	if ( &&  > 0) {
		for (const child of ) {
			// Recursively call to get the planId of the child node			const childIds = (child);
			(...childIds);
		}
	}
	return result;
}