vue后台动态扁平化与过滤

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，则保留该菜单项，否则剔除。