update 优化 删除展开折叠按钮 菜单数据量大的清空下 展开会导致页面卡顿问题(在懒加载数据的清空下这个功能不推荐使用了)
This commit is contained in:
@ -27,9 +27,6 @@
|
|||||||
<el-col :span="1.5">
|
<el-col :span="1.5">
|
||||||
<el-button v-hasPermi="['system:menu:add']" type="primary" plain icon="Plus" @click="handleAdd()">新增 </el-button>
|
<el-button v-hasPermi="['system:menu:add']" type="primary" plain icon="Plus" @click="handleAdd()">新增 </el-button>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="1.5">
|
|
||||||
<el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="1.5">
|
<el-col :span="1.5">
|
||||||
<el-button type="danger" plain icon="Delete" @click="handleCascadeDelete" :loading="deleteLoading">级联删除</el-button>
|
<el-button type="danger" plain icon="Delete" @click="handleCascadeDelete" :loading="deleteLoading">级联删除</el-button>
|
||||||
</el-col>
|
</el-col>
|
||||||
@ -44,7 +41,7 @@
|
|||||||
row-key="menuId"
|
row-key="menuId"
|
||||||
border
|
border
|
||||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||||
:default-expand-all="isExpandAll"
|
:default-expand-all="false"
|
||||||
lazy
|
lazy
|
||||||
:load="getChildrenList"
|
:load="getChildrenList"
|
||||||
>
|
>
|
||||||
@ -306,7 +303,6 @@ const menuExpandMap = ref({});
|
|||||||
const loading = ref(true);
|
const loading = ref(true);
|
||||||
const showSearch = ref(true);
|
const showSearch = ref(true);
|
||||||
const menuOptions = ref<MenuOptionsType[]>([]);
|
const menuOptions = ref<MenuOptionsType[]>([]);
|
||||||
const isExpandAll = ref(false);
|
|
||||||
|
|
||||||
const dialog = reactive<DialogOption>({
|
const dialog = reactive<DialogOption>({
|
||||||
visible: false,
|
visible: false,
|
||||||
@ -438,25 +434,6 @@ const handleAdd = (row?: MenuVO) => {
|
|||||||
dialog.visible = true;
|
dialog.visible = true;
|
||||||
dialog.title = '添加菜单';
|
dialog.title = '添加菜单';
|
||||||
};
|
};
|
||||||
/** 展开/折叠操作 */
|
|
||||||
const handleToggleExpandAll = () => {
|
|
||||||
isExpandAll.value = !isExpandAll.value;
|
|
||||||
toggleExpandAll(menuList.value, isExpandAll.value);
|
|
||||||
};
|
|
||||||
/** 展开/折叠所有 */
|
|
||||||
const toggleExpandAll = (data: MenuVO[], status: boolean) => {
|
|
||||||
data.forEach(async (item: MenuVO) => {
|
|
||||||
const menuChildrenList = menuChildrenListMap.value[item.menuId];
|
|
||||||
// 从menuChildrenListMap中获取子菜单列表
|
|
||||||
if (menuChildrenList && (!item.children || item.children.length === 0)) {
|
|
||||||
item.children = menuChildrenList || [];
|
|
||||||
// 等待子菜单列表加载完成
|
|
||||||
await nextTick();
|
|
||||||
}
|
|
||||||
menuTableRef.value?.toggleRowExpansion(item, status);
|
|
||||||
if (item.children && item.children.length > 0) toggleExpandAll(item.children, status);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
/** 修改按钮操作 */
|
/** 修改按钮操作 */
|
||||||
const handleUpdate = async (row: MenuVO) => {
|
const handleUpdate = async (row: MenuVO) => {
|
||||||
reset();
|
reset();
|
||||||
|
Reference in New Issue
Block a user