vue后台动态扁平化与过滤:
/**
* @description 使用递归扁平化菜单,方便添加动态路由
* @param {Array} menuList 菜单列表
* @returns {Array}
*/
export function getFlatMenuList(menuList) {
let newMenuList = JSON.parse(JSON.stringify(menuList));
return newMenuList.flatMap(item => [item, ...(item.children ? getFlatMenuList(item.children) : [])]);
}
函数 getFlatMenuList
的作用是递归地将菜单列表进行扁平化处理,以便更方便地添加动态路由。函数接受一个菜单列表 menuList
作为参数,并返回一个扁平化后的菜单数组。
函数的实现过程如下:
- 首先,我们创建一个新的数组
newMenuList
,并使用JSON.parse(JSON.stringify(menuList))
进行深拷贝,以避免修改原始菜单列表。 - 然后,我们使用
flatMap
方法对newMenuList
进行处理。 - 对于数组中的每个菜单项
item
,我们将其本身添加到新数组中,使用展开运算符...(item.children ? getFlatMenuList(item.children) : [])
,我们可以判断当前菜单项是否有子菜单 (item.children
)。如果有子菜单,我们将递归调用getFlatMenuList
函数处理子菜单,并将结果加到新数组中。 - 最后,我们将扁平化后的菜单数组返回。
/**
* @description 使用递归过滤出需要渲染在左侧菜单的列表 (需剔除 isHide == true 的菜单)
* @param {Array} menuList 菜单列表
* @returns {Array}
*/
export function getShowMenuList(menuList) {
let newMenuList = JSON.parse(JSON.stringify(menuList));
return newMenuList.filter(item => {
item.children?.length && (item.children = getShowMenuList(item.children));
return !item.meta?.isHide;
});
}
函数 getShowMenuList
的作用是递归地过滤出需要在左侧菜单中渲染的菜单列表,即剔除具有 isHide
属性为 true
的菜单项。函数接受一个菜单列表 menuList
作为参数,并返回一个过滤后的菜单数组。
函数的实现过程如下:
- 首先,我们创建一个新的数组
newMenuList
,并使用JSON.parse(JSON.stringify(menuList))
进行深拷贝,以避免修改原始菜单列表。 - 使用
filter
方法对newMenuList
进行处理。 - 对于数组中的每个菜单项
item
,我们首先判断是否存在子菜单 (item.children?.length
),如果有子菜单,我们递归调用getShowMenuList
函数来处理子菜单,并将结果赋值给当前菜单项的children
属性。 - 最后,我们返回过滤后的菜单数组,利用
return !item.meta?.isHide
来判断菜单项的isHide
属性,如果为false
,则保留该菜单项,否则剔除。