chore: 虚拟滚动及自动list转tree(由vxe处理)

This commit is contained in:
dap 2024-11-15 13:46:36 +08:00
parent acd305bd9d
commit 2f37942961
4 changed files with 38 additions and 38 deletions

View File

@ -1,3 +1,9 @@
# 1.1.2
**OTHERS**
- 菜单管理 改为虚拟滚动
# 1.1.1 # 1.1.1
**REFACTOR** **REFACTOR**

View File

@ -4,12 +4,7 @@ import type { Recordable } from '@vben/types';
import { nextTick } from 'vue'; import { nextTick } from 'vue';
import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui'; import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
import { import { eachTree, getVxePopupContainer } from '@vben/utils';
eachTree,
getVxePopupContainer,
listToTree,
removeEmptyChildren,
} from '@vben/utils';
import { Popconfirm, Space } from 'ant-design-vue'; import { Popconfirm, Space } from 'ant-design-vue';
@ -43,13 +38,7 @@ const gridOptions: VxeGridProps = {
const resp = await deptList({ const resp = await deptList({
...formValues, ...formValues,
}); });
const treeData = listToTree(resp, { return { rows: resp };
id: 'deptId',
pid: 'parentId',
children: 'children',
});
removeEmptyChildren(treeData);
return { rows: treeData };
}, },
// //
querySuccess: () => { querySuccess: () => {
@ -62,15 +51,21 @@ const gridOptions: VxeGridProps = {
}, },
}, },
}, },
/**
* 虚拟滚动 默认关闭
*/
scrollY: {
enabled: false,
gt: 0,
},
rowConfig: { rowConfig: {
isHover: true, isHover: true,
keyField: 'deptId', keyField: 'deptId',
}, },
treeConfig: { treeConfig: {
parentField: 'parentId', parentField: 'parentId',
rowField: 'deptId', rowField: 'deptId',
transform: false, transform: true,
}, },
id: 'system-dept-index', id: 'system-dept-index',
}; };

View File

@ -6,12 +6,7 @@ import { computed } from 'vue';
import { useAccess } from '@vben/access'; import { useAccess } from '@vben/access';
import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui'; import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
import { Fallback } from '@vben/common-ui'; import { Fallback } from '@vben/common-ui';
import { import { eachTree, getVxePopupContainer } from '@vben/utils';
eachTree,
getVxePopupContainer,
listToTree,
removeEmptyChildren,
} from '@vben/utils';
import { Popconfirm, Space } from 'ant-design-vue'; import { Popconfirm, Space } from 'ant-design-vue';
@ -49,13 +44,7 @@ const gridOptions: VxeGridProps = {
const resp = await menuList({ const resp = await menuList({
...formValues, ...formValues,
}); });
const treeData = listToTree(resp, { return { rows: resp };
id: 'menuId',
pid: 'parentId',
children: 'children',
});
removeEmptyChildren(treeData);
return { rows: treeData };
}, },
}, },
}, },
@ -63,11 +52,19 @@ const gridOptions: VxeGridProps = {
isHover: true, isHover: true,
keyField: 'menuId', keyField: 'menuId',
}, },
/**
* 开启虚拟滚动
* 数据量小可以选择关闭
*/
scrollY: {
enabled: true,
gt: 0,
},
treeConfig: { treeConfig: {
parentField: 'parentId', parentField: 'parentId',
rowField: 'menuId', rowField: 'menuId',
transform: false, // tree vxe
transform: true,
}, },
id: 'system-menu-index', id: 'system-menu-index',
}; };

View File

@ -4,7 +4,7 @@ import type { Recordable } from '@vben/types';
import { nextTick } from 'vue'; import { nextTick } from 'vue';
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui'; import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
import { getVxePopupContainer, listToTree } from '@vben/utils'; import { getVxePopupContainer } from '@vben/utils';
import { Popconfirm, Space } from 'ant-design-vue'; import { Popconfirm, Space } from 'ant-design-vue';
@ -38,12 +38,7 @@ const gridOptions: VxeGridProps = {
const resp = await categoryList({ const resp = await categoryList({
...formValues, ...formValues,
}); });
const treeData = listToTree(resp, { return { rows: resp };
id: 'id',
pid: 'parentId',
children: 'children',
});
return { rows: treeData };
}, },
// //
querySuccess: () => { querySuccess: () => {
@ -53,13 +48,20 @@ const gridOptions: VxeGridProps = {
}, },
}, },
}, },
/**
* 虚拟滚动 默认关闭
*/
scrollY: {
enabled: false,
gt: 0,
},
rowConfig: { rowConfig: {
keyField: 'id', keyField: 'id',
}, },
treeConfig: { treeConfig: {
parentField: 'parentId', parentField: 'parentId',
rowField: 'id', rowField: 'id',
transform: false, transform: true,
}, },
// //
id: 'workflow-category-index', id: 'workflow-category-index',