element ui请教

ppgjx

[Asm] 纯文本查看 复制代码

<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很小白

r396517261

官网上有例子 直接加一个 <el-menu-item>标题</el-menu-item> 标签就行

小丑恶人

动态路由应该就可以啦

Libra_c

搞一个动态路由，详细看文档

zx2000

下面的才是无下拉的，你写的全是有下拉的

iLouis

[HTML] 纯文本查看 复制代码

<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>

在这上面加

[HTML] 纯文本查看 复制代码

<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
文档和示例在这