【菜单列表】解决子集过多导致展开卡顿

src/modules/base/views/menu/index.vue

@@ -23,7 +23,14 @@
 		</cl-row>
 
 		<cl-row>
-			<cl-table ref="Table" row-key="id" @row-click="onRowClick">
+			<cl-table
+				ref="Table"
+				row-key="id"
+				lazy
+				:load="onChildrenLoad"
+				:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+				@row-click="onRowClick"
+			>
 				<!-- 图标 -->
 				<template #column-icon="{ scope }">
 					<cl-svg :name="scope.row.icon" size="16px" style="margin-top: 5px" />
@@ -104,6 +111,13 @@ import MenuImp from "./components/imp.vue";
 import MenuExp from "./components/exp.vue";
 import AutoMenu from "/$/helper/components/auto-menu/index.vue";
 import AutoPerms from "/$/helper/components/auto-perms/index.vue";
+import { isEmpty } from "/@/modules/dict/utils";
+
+interface Item extends Eps.BaseSysMenuEntity {
+	children?: Item[];
+	_children?: Item[];
+	hasChildren?: boolean;
+}
 
 const { service, mitt } = useCool();
 const { menu } = useStore();
@@ -357,7 +371,7 @@ const Crud = useCrud(
 		service: service.base.sys.menu,
 		onRefresh(_, { render }) {
 			service.base.sys.menu.list().then((list) => {
-				render(deepTree(list));
+				render(onData(list));
 				menu.get();
 			});
 		}
@@ -372,15 +386,43 @@ function refresh(params?: any) {
 	Crud.value?.refresh(params);
 }
 
+// 解决子集过多导致展开卡顿
+function onData(list: Item[]) {
+	const data = deepTree(list);
+
+	// 递归处理
+	const deep = (arr: Item[]) => {
+		arr.forEach((e) => {
+			if (!isEmpty(e.children)) {
+				e.hasChildren = true;
+				e._children = e.children;
+				delete e.children;
+
+				deep(e._children!);
+			}
+		});
+	};
+
+	deep(data);
+
+	return data;
+}
+
+// 监听子节点数据的加载
+function onChildrenLoad(row: Item, treeNode: unknown, resolve: (data: Item[]) => void) {
+	resolve(row._children!);
+}
+
 // 行点击展开
-function onRowClick(row: any, column: any) {
+function onRowClick(row: Item) {
-	if (column?.property && row.children) {
+	if (row._children) {
+		row.children = row._children;
 		Table.value?.toggleRowExpansion(row);
 	}
 }
 
 // 子集新增
-function append({ type, id }: any) {
+function append({ type = 0, id }: Item) {
 	Crud.value?.rowAppend({
 		parentId: id,
 		parentType: type,
@@ -391,7 +433,7 @@ function append({ type, id }: any) {
 }
 
 // 设置权限
-function addPermission({ id }: any) {
+function addPermission({ id }: Item) {
 	Crud.value?.rowAppend({
 		parentId: id,
 		type: 2