From 4fc3ba568f4d13bb9e47e835b90f8c1af6661c33 Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Wed, 10 Sep 2025 11:47:19 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E8=8F=9C=E5=8D=95=E7=AE=A1?=
=?UTF-8?q?=E7=90=86=20=E6=94=B9=E4=B8=BA=E8=8A=82=E7=82=B9=E6=87=92?=
=?UTF-8?q?=E5=8A=A0=E8=BD=BD(=E5=8E=BB=E9=99=A4=E5=B1=95=E5=BC=80?=
=?UTF-8?q?=E5=85=A8=E9=83=A8=E5=8A=9F=E8=83=BD)=20=E5=85=B3=E9=97=AD?=
=?UTF-8?q?=E8=99=9A=E6=8B=9F=E6=BB=9A=E5=8A=A8(=E5=8F=AF=E8=87=AA?=
=?UTF-8?q?=E8=A1=8C=E5=BC=80=E5=90=AF)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
CHANGELOG.md | 1 +
apps/web-antd/src/views/system/menu/data.tsx | 2 +
apps/web-antd/src/views/system/menu/index.vue | 63 +++++++++++++++----
3 files changed, 53 insertions(+), 13 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4fb15188..b322ab4d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,6 +24,7 @@
- 流程相关样式更新
- 请假申请 表单更改为drawer方式 替换新页面打开
- API加密 迁移到@vben/utils下
+- 菜单管理 改为节点懒加载(去除展开全部功能) 关闭虚拟滚动(可自行开启)
**OTHERS**
diff --git a/apps/web-antd/src/views/system/menu/data.tsx b/apps/web-antd/src/views/system/menu/data.tsx
index e30a0023..e5177cab 100644
--- a/apps/web-antd/src/views/system/menu/data.tsx
+++ b/apps/web-antd/src/views/system/menu/data.tsx
@@ -62,6 +62,8 @@ export const columns: VxeGridProps['columns'] = [
field: 'menuName',
treeNode: true,
width: 200,
+ // 层级更明显显示
+ align: 'left',
slots: {
// 需要i18n支持 否则返回原始值
default: ({ row }) => $t(row.menuName),
diff --git a/apps/web-antd/src/views/system/menu/index.vue b/apps/web-antd/src/views/system/menu/index.vue
index 14bda194..39591e89 100644
--- a/apps/web-antd/src/views/system/menu/index.vue
+++ b/apps/web-antd/src/views/system/menu/index.vue
@@ -9,7 +9,12 @@ import { computed, ref } from 'vue';
import { useAccess } from '@vben/access';
import { Fallback, Page, useVbenDrawer } from '@vben/common-ui';
import { $t } from '@vben/locales';
-import { eachTree, getVxePopupContainer, treeToList } from '@vben/utils';
+import {
+ eachTree,
+ getVxePopupContainer,
+ listToTree,
+ treeToList,
+} from '@vben/utils';
import { Popconfirm, Space, Switch, Tooltip } from 'ant-design-vue';
@@ -47,29 +52,47 @@ const gridOptions: VxeGridProps = {
const resp = await menuList({
...formValues,
});
- return { rows: resp };
+ // 手动转为树结构
+ const treeData = listToTree(resp, { id: 'menuId', pid: 'parentId' });
+ // 添加hasChildren字段
+ eachTree(treeData, (item) => {
+ item.hasChildren = !!(item.children && item.children.length > 0);
+ });
+ console.log(treeData);
+
+ return { rows: treeData };
},
},
},
rowConfig: {
keyField: 'menuId',
+ // 高亮点击行
+ isCurrent: true,
},
/**
* 开启虚拟滚动
* 数据量小可以选择关闭
* 如果遇到样式问题(空白、错位 滚动等)可以选择关闭虚拟滚动
+ *
+ * 由于已经重构为懒加载 不需要虚拟滚动(如果你觉得卡顿 依旧可以选择开启)
*/
- scrollY: {
- enabled: true,
- gt: 0,
- },
+ // scrollY: {
+ // enabled: true,
+ // gt: 0,
+ // },
treeConfig: {
parentField: 'parentId',
rowField: 'menuId',
- // 自动转换为tree 由vxe处理 无需手动转换
- transform: true,
+ // 使用懒加载需要自行构造hasChild字段 不需要自动转换为树结构
+ transform: false,
// 刷新接口后 记录展开行的情况
reserve: true,
+ // 是否存在子节点的字段
+ hasChildField: 'hasChildren',
+ // 开启展开 懒加载
+ lazy: true,
+ // 懒加载方法 直接返回children
+ loadMethod: ({ row }) => row.children ?? [],
},
id: 'system-menu-index',
};
@@ -173,25 +196,29 @@ const isAdmin = computed(() => {
-
+
+
+