element ui请教
<template><el-container style="height: 100%;">
<el-header style="background-color: white;height: 80px" class="brd">
<div>
<el-avatar size="large" :src="avatarURL"></el-avatar>
<span style="color: black">测试系统</span>
</div>
</el-header>
<el-container class="brd" style="margin-top: 2px">
<el-aside width="230px" style="background-color: white" class="brd">
<el-menu
unique-opened
router
default-active="/Test"
class="el-menu-vertical-demo"
>
<el-submenu :index="index"v-for="(value, index) in data">
<template slot="title">
<i :class="value.icon"></i>
<span>{{ value.name }}</span>
</template>
<el-menu-item v-for="(value, index) in value.item" :index="value.path">{{value.name}}</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
<script>
import avatarURL from '../assets/login.jpg'
export default {
name: "Home",
methods:{
},
created() {
},
data(){
return{
avatarURL: avatarURL,
data:[
{icon: "el-icon-user",name: "基本操作",item: [
{path: "/test",name: "测试"},
{path: "/test1",name: "测试1"},
{path: "/test2",name: "测试2"},
]},
{icon: "el-icon-user",name: "基本操作",item: [
{path: "/test",name: "测试"},
{path: "/test1",name: "测试1"},
{path: "/test2",name: "测试2"},
]},
{icon: "el-icon-user",name: "基本操作",item: [
{path: "/test",name: "测试"},
{path: "/test1",name: "测试1"},
{path: "/test2",name: "测试2"},
]},
{icon: "el-icon-user",name: "基本操作",item: [
{path: "/test",name: "测试"},
{path: "/test1",name: "测试1"},
{path: "/test2",name: "测试2"},
]},
{icon: "el-icon-user",name: "基本操作",item: [
{path: "/test",name: "测试"},
{path: "/test1",name: "测试1"},
{path: "/test2",name: "测试2"},
]},
{icon: "el-icon-user",name: "基本操作",item: [
{path: "/test",name: "测试"},
{path: "/test1",name: "测试1"},
{path: "/test2",name: "测试2"},
]},
{icon: "el-icon-user",name: "基本操作",item: [
{path: "/test",name: "测试"},
{path: "/test1",name: "测试1"},
{path: "/test2",name: "测试2"},
]},
]
}
}
}
</script>
<style lang="less" scoped>
.el-header{
background-color: #373d41;
display: flex;
justify-content: space-between;
padding-left: 0;
align-items: center;
color: #dddddd;
font-size: 20px;
> div{
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
span{
margin-left: 15px;
}
img{
height: 100%;
}
}
}
.el-aside{
background-color: #333744;
.el-menu{
border-right: none;
}
}
.el-man{
background-color: #eaedf1;
}
.brd{
box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
</style>
这是我的代码 用的vue 饿了么的ui
他是这样的 每一行都是可以下拉的
现在我想和下面一张图一样 和下拉菜单同一级 加一个控制台 这个控制台没有下拉按钮 点上去就是一个页面 这种该怎么加呢？对css很小白
官网上有例子 直接加一个 <el-menu-item>标题</el-menu-item> 标签就行 动态路由应该就可以啦 搞一个动态路由，详细看文档 下面的才是无下拉的，你写的全是有下拉的 本帖最后由 iLouis 于 2022-12-12 22:50 编辑
<el-submenu :index="index"v-for="(value, index) in data">
<template slot="title">
<i :class="value.icon"></i>
<span>{{ value.name }}</span>
</template>
<el-menu-item v-for="(value, index) in value.item" :index="value.path">{{value.name}}</el-menu-item>
</el-submenu>
在这上面加
<el-menu-item index="control">
<i class="el-icon-menu"></i>
<span slot="title">控制台</span>
</el-menu-item>
平级就好了
https://element.eleme.cn/#/zh-CN/component/menu
文档和示例在这
页:
[1]