合并

src/views/home/components/Menu.vue

@@ -20,12 +20,16 @@
             color="#222"
           ></SvgIcons>
         </div>
-        <span v-if="!isCollapse" @click="
-          handleChangeMenuUrl(
-            { name: '驾驶舱', id: 1, path: 'cockpitManage', iconName: 'gps' },
-            `/home/cockpitManage?name=驾驶舱`
-          )
-          " :class="isCollapse ? 'stop-animation' : 'active-animation'">
+        <span
+          v-if="!isCollapse"
+          @click="
+            handleChangeMenuUrl(
+              { name: '驾驶舱', id: 1, path: 'cockpitManage', iconName: 'gps' },
+              `/home/cockpitManage?name=驾驶舱`
+            )
+          "
+          :class="isCollapse ? 'stop-animation' : 'active-animation'"
+        >
           风机运行管理平台
         </span>
       </div>
@@ -44,46 +48,57 @@
       :unique-opened="true"
       :collapse="isCollapse"
     >
-      <div v-for="item in routerList" :key="item.id">
+      <template v-for="item in routerList">
         <el-submenu
+          v-if="item.children && item.children.length"
           :index="item.path"
-          v-if="item.children && item.children.length > 0"
         >
           <template slot="title">
-            <i class="el-icon-menu" v-if="isElPrefix(item.iconName)"></i>
-            <i v-else class="svnIcon"
-              ><svg-icon :icon-class="item.iconName"
-            /></i>
+            <i v-if="isElPrefix(item.iconName)" class="el-icon-menu"></i>
+            <i v-else class="svnIcon">
+              <svg-icon :icon-class="item.iconName" />
+            </i>
             <span>{{ item.name }}</span>
           </template>
           <el-menu-item
             v-for="child in item.children"
+            v-if="child.meta?.hidden === false"
             :key="child.id"
             :index="`/home/${item.path}/${child.path}?id=${child.id}&name=${child.name}`"
           >
-            <i class="el-icon-menu" v-if="isElPrefix(child.iconName)"></i>
-            <i v-else class="svnIcon"
-              ><svg-icon :icon-class="child.iconName"
-            /></i>
+            <i v-if="isElPrefix(child.iconName)" class="el-icon-menu"></i>
+            <i v-else class="svnIcon">
+              <svg-icon :icon-class="child.iconName" />
+            </i>
             <span>{{ child.name }}</span>
           </el-menu-item>
         </el-submenu>
         <el-menu-item
+          v-else-if="item.meta?.hidden === false"
           :key="item.id"
           :index="`/home/${item.path}?id=${item.id}&name=${item.name}`"
-          v-else
         >
-          <i class="el-icon-menu" v-if="isElPrefix(item.iconName)"></i>
-          <i v-else class="svnIcon"><svg-icon :icon-class="item.iconName" /></i>
+          <i v-if="isElPrefix(item.iconName)" class="el-icon-menu"></i>
+          <i v-else class="svnIcon">
+            <svg-icon :icon-class="item.iconName" />
+          </i>
           <span>{{ item.name }}</span>
         </el-menu-item>
-      </div>
+      </template>
     </el-menu>
     <div class="foldBox flexCenter">
-      <span v-show="isCollapse" class="el-icon-s-unfold icon" @click="debouncedToggleCollapse(false)">
+      <span
+        v-show="isCollapse"
+        class="el-icon-s-unfold icon"
+        @click="debouncedToggleCollapse(false)"
+      >
         展开
       </span>
-      <span v-show="!isCollapse" class="el-icon-s-fold icon" @click="debouncedToggleCollapse(true)">
+      <span
+        v-show="!isCollapse"
+        class="el-icon-s-fold icon"
+        @click="debouncedToggleCollapse(true)"
+      >
         收起
       </span>
     </div>
@@ -132,7 +147,6 @@ export default {
       ...this.routerList,
       ...this.$store.state.auth.dynamicRouter,
     ];
-    console.log(this.routerList, "组件内dynamicRouter");
 
     // Debounce the toggle collapse function to prevent rapid toggling
     this.debouncedToggleCollapse = debounce(this.toggleCollapse, 300);