integrated_traffic_vue/src/layout/menu/index.vue

<template>
  <template v-for="menu in props.menus" :key="menu.path">
    <!--            没有二级导航-->
    <el-menu-item
      v-if="fnIsShowMenuItem(menu)"
      :index="menu.path"
      :route="{ path: menu.path }"
    >
      <component
        v-if="menu.meta?.icon"
        :is="'icon-' + menu.meta.icon"
        theme="filled"
        fill="#a5b2c2"
        size="18"
        :stroke-width="3"
        style="margin-right: 15px"
      />
      <span>{{ menu.meta?.title }}</span>
    </el-menu-item>
    <!--            有二级导航-->
    <el-sub-menu v-else-if="fnIsShowSubmenu(menu)" :index="menu.path">
      <template #title>
        <component
          v-if="menu.meta?.icon"
          :is="'icon-' + menu.meta.icon"
          theme="filled"
          fill="#a5b2c2"
          size="18"
          :stroke-width="3"
          style="margin-right: 15px"
        />
        <span>{{ menu.meta?.title }}</span>
      </template>
      <!--                递归调用当前组件生成导航-->
      <layout-menu :menus="menu.children" />
    </el-sub-menu>
  </template>
</template>

<script setup>
defineOptions({
  name: "LayoutMenu",
});
const props = defineProps({
  menus: {
    type: Array,
    default: () => [],
  },
});
const fnIsShowMenuItem = (menu) => {
  if (menu.meta?.isMenu === false) {
    return false;
  }
  if (menu.meta?.isSubMenu === false) {
    return true;
  } else {
    return !menu.children || menu.children.length === 0;
  }
};
const fnIsShowSubmenu = (menu) => {
  if (menu.meta?.isMenu === false) {
    return false;
  }
  if (menu.meta?.isSubMenu === false) {
    return false;
  } else {
    return menu.children && menu.children.length > 0;
  }
};
</script>

<style scoped lang="scss"></style>