董国庆
2025-06-21 caaace44a0f0049b6a645d6e0a511af6adf7c1e0
laboratory/src/layouts/components/ElMenu/MenuItem.vue
@@ -3,7 +3,7 @@
  <!-- <div v-if="!item.meta.hide && menus.includes(item.meta.privilege)"> -->
  <div v-if="item.meta && item.meta.title && !item.meta.hide">
    <!-- 根菜单 -->
    <MenuLink :to="resolvePath()" v-if="!item.children">
    <MenuLink :to="resolvePath()" v-if="!filteredChildren || filteredChildren.length === 0">
      <el-menu-item :index="resolvePath()">
        <i :class="(item.meta && item.meta.icon) || ''"></i>
        <span slot="title">{{ (item.meta && item.meta.title) || '' }}</span>
@@ -16,8 +16,8 @@
        <i :class="(item.meta && item.meta.icon) || ''"></i>
        <span slot="title">{{ (item.meta && item.meta.title) || '' }}</span>
      </template>
      <!-- 这里递归去展示多级菜单 -->
      <menu-item v-for="(route, index) in item.children" :key="index" :item="route"
      <!-- 递归展示多级菜单,已过滤无权限的children -->
      <menu-item v-for="(route, index) in filteredChildren" :key="index" :item="route"
        :fatherPath="resolvePath(route.path)">
      </menu-item>
    </el-submenu>
@@ -29,6 +29,32 @@
import { mapState } from "vuex";
import path from "path";
import MenuLink from "./MenuLink.vue";
function filterMenusByPrivilege(menus, flatMenus) {
  if (!menus) return [];
  return menus
    .filter(menu => {
      if (menu.meta && menu.meta.privilege) {
        return flatMenus.includes(menu.meta.privilege);
      }
      return true;
    })
    .map(menu => {
      if (menu.children && menu.children.length > 0) {
        return {
          ...menu,
          children: filterMenusByPrivilege(menu.children, flatMenus)
        };
      }
      return menu;
    })
    .filter(menu => {
      if (menu.children && menu.children.length === 0) {
        return false;
      }
      return true;
    });
}
export default {
  // 做组件递归时必须定义一个name。然后递归时的组件名就是这里的name值
@@ -50,7 +76,11 @@
  },
  computed: {
    ...mapState(["menus"]),
    ...mapState(["flatMenus"]),
    filteredChildren() {
      // 只对children做权限过滤
      return filterMenusByPrivilege(this.item.children, this.flatMenus);
    }
  },
  data() {
    return {};