Element Ui 导航菜单封装

<template>
  <div class="divmenu">
<el-row class="tac">
  <el-col>
    <img src="../assets/logo3.png" style="width:100%">
    <el-menu
      :default-active="this.$route.path"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      text-color="#fff"
      active-text-color="#fff"
      router
      unique-opened
      >
      <el-menu-item index="/home" @click="title1()">
        <i class="el-icon-s-home"></i>
        <span slot="title">Home Page</span>
      </el-menu-item>

      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-edit"></i>
          <span>Product Request</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/home/add" background-color="#00203e" @click="title2()">Add New
            <i class="el-icon-circle-plus-outline" style="position: relative;left: 100px;"></i>
          </el-menu-item>
          <el-menu-item index="/home/viewall" style="background-color:#000;"  @click="title5()">View All</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-menu-item index="/home/todolist" @click="title6()">
        <i class="el-icon-document"></i>
        <span slot="title">My to-do List</span>
      </el-menu-item>

      <el-menu-item index="/home/myaccout" @click="title3()">
        <i class="el-icon-s-custom"></i>
        <span slot="title">My Accout</span>
      </el-menu-item>

      <el-submenu index="5">
        <template slot="title">
          <i class="el-icon-setting"></i>
          <span>Admin Setting</span>
        </template>
        <el-menu-item-group>
            <el-menu-item index="/home/addaccessrole" background-color="#00203e" @click="title4()">Add Access Role
            <i class="el-icon-circle-plus-outline" style="position: relative;left: 48px;"></i>
          </el-menu-item>
          <el-menu-item index="/home/accessuserlist" style="background-color:#000;" @click="title7()">Access User List</el-menu-item>
          <el-menu-item index="/home/accessrolelist" style="background-color:#000;" @click="title8()">Access Role List</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </el-col>
</el-row>
  </div>
</template>
<script>

export default {
  name: 'Menu',
  data(){ 
    return {
      tt1:'Home Page',
      tt2:'',
    }
  },
  methods:{
       handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      title1(){
        this.$emit('title',{tt1:'Home Page',tt2:''})
      },
      title2(){
        this.$emit('title',{tt1:'Product Request',tt2:'| Add New'});

      },
      title3(){
        this.$emit('title',{tt1:'My Account ',tt2:''})
      },
      title4(){
        this.$emit('title',{tt1:'Admin Settings',tt2:'| Add Access Role'})
      },
      title5(){
        this.$emit('title',{tt1:'Product Request',tt2:'| View All'})
      },
       title6(){
        this.$emit('title',{tt1:'My to-do List',tt2:''})
      },
       title7(){
        this.$emit('title',{tt1:'Admin Settings',tt2:'| Access User List'})
      },
       title8(){
        this.$emit('title',{tt1:'Admin Settings',tt2:'| Access Role List'})
      }
  }
}
</script>

<style>
.el-menu-vertical-demo{
    border: 0px;
}
.divmenu .el-col{
    background-color: #16538c;
}
.el-menu{
  text-align: left;
}
.el-submenu{
  border-bottom: 0.1px solid rgb(50, 50, 50);
}
.el-menu-item{
  border-bottom: 1px solid rgb(50, 50, 50);
}
.el-menu-item.is-active{
  background-color:#1890ff!important; 
}
.el-submenu.is-active{
  background-color:#004C93!important; 
 
}
.el-menu{
  background-color: #00203e;
}
.el-menu-item-group {
    background-color: black;
}
.el-menu-item-group .el-menu-item :hover{
    background-color: rgb(233, 233, 233);
}
.el-menu-item-group__title{
  padding: 0;
}
</style>

标签：el,菜单,title,tt2,tt1,Element,Ui,menu,emit
来源： https://blog.csdn.net/web_liudong/article/details/121767653