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(() => {
-
+
+
+