element增加一级菜单页面

最新推荐文章于 2025-06-11 09:51:55 发布

原创最新推荐文章于 2025-06-11 09:51:55 发布 · 3.3k 阅读

0 ·

CC 4.0 BY-SA版权

这篇博客介绍了如何使用Element UI库在页面中添加包含一级菜单的导航结构。内容详细讲解了如何配置<el-submenu>组件，确保一级菜单在特定条件下保持不可点击状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//条件判断 如果该菜单栏的children有一个以上的二级菜单，则展示出一级菜单

<el-submenu v-if="item.children.length>1" :default-openeds="['1']" :index="item.title">
    <template slot="title">
         <i :class='item.icon1' v-if="item.icon1" style="marginRight:16px"></i>
         <icon-svg :icon-class="item.icon" v-else="item.icon"></icon-svg>
         <span>{{item.title}}</span>
         </template>
            <template v-for="child in item.children">
               <sidebar-item :default-openeds="['1']" class='nest-menu' 
                             v-if='child.children&&child.children.length>0' 
                             :routes='[child]'>
               </sidebar-item>
               <router-link v-else :to="'/'+item.code+'/'+child.code">
                   <el-menu-item :default-openeds="['1']" :index="item.code+'/'+child.code">
                       <icon-svg v-if='child.icon' :icon-class="child.icon"></icon-svg>
                       <span>{{child.title}}</span>
                   </el-menu-item>
               </router-link>
    </template>
</el-submenu>
//否则，菜单栏的一级菜单则变为可点击状态
<el-item v-else :default-openeds="['1']" :index="item.title">
                <template slot="title">
                    <icon-svg v-if='item.icon' :icon-class="item.icon">
                         </icon-svg>
                         <span>{{item.title}}</span>
                    </template>
                <template v-for="child in item.children">
    <sidebar-item :default-openeds="['1']" 
                  class='nest-menu' 
                  v-if='child.children&&child.children.length>0' 
                  :routes='[child]'> 
    </sidebar-item>