<el-menu-item-group> <template #title>弹框</template> <el-menu-item index="/tags">弹框管理</el-menu-item> </el-menu-item-group> 1. 2. 3. 4. { path: '/dialog', component: () => import('../views/Dialog/index.vue'), name: 'Dialog', meta: { hidden: true, }, } 1. ...
<el-menu-item index="1-2">item two</el-menu-item> </el-menu-item-group> <el-menu-item-group title="Group Two"> <el-menu-item index="1-3">item three</el-menu-item> </el-menu-item-group> <el-sub-menu index="1-4"> <template #title><span>item four</span></template> <...
> <el-menu-item index="3-3">Option 3</el-menu-item> </el-menu-item-group> <el-sub-menu index="3-4"> <template #title>Option 4</template> <el-menu-item index="3-4-1">Option 4-1</el-menu-item>
使用Element Plus的布局组件container+菜单组件Menu,来搭建框架。 这里是写样式布局,没有啥好说的,直接上代码 HelloWorld.vue 代码如下 <template> <div style="height: calc%28100vh%29; overflow: hidden"> <el-container style="height: 100%; overflow: hidden"> <el-aside width="auto"> <el-menu clas...
-- 二级导航 --><templatev-if="item.children"><el-menu-item-groupv-for="val in item.children":key="val.meta.key"><templatev-if="val.children"><el-sub-menuv-for="ele in val.children":key="ele.meta.key":index="ele.path"><template #title><span>{{val.meta.title}}</span></...
<el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" <el-submenu index="1"> <template slot="title"><i class="el-icon-location"></i>导航一</template> <el-menu-item-group> <template slot="title">分组一</template...
el-menu-item-group> <el-sub-menu index="1-4"> <template #title>item four</template> <el-menu-item index="1-4-1">item one</el-menu-item> </el-sub-menu> </el-sub-menu> <el-menu-item index="2"> <el-icon><icon-menu /></el-icon> <span>Navigator Two</span> </el-menu...
"common-aside" width="200px"><el-menu background-color="none" text-color="#fff" :router="true"><el-sub-menu index="1"><template #title><el-icon><location /></el-icon><span>账号管理</span></template><el-menu-item-group><el-menu-item index="/user">用户列表</el-menu-item><...
}.el-menu,.el-sub-menu,el-menu-item-group,el-menu-item { width: 200px; word-wrap: normal;}ul.el-menu>li{ border-bottom: 2px solid #e9e9e9;}li.el-menu-item.is-active{ border-bottom: 2px solid var(--el-menu-active-color); color: var(--el-menu-active-color)...
│ ThirdMenuItem1-A-1 │ │ ├─────────────────────┤ │ │ ThirdMenuItem2-A-1 │ │ ├─────────────────────┤ Main Content Area │ │ SecondMenu-A-2 │ │ ├─────────────────────┤ │ ...