vue+element实现menu组件

用elementUI做的一个左侧菜单展示，直接上代码：

<template>
    <div class="">
      <!-- 一级菜单循环-->
      <el-menu class="menuLen" v-for="( item1 ,index1 ) in menuList" :unique-opened=true  :router=true :default-active="defaultActive" :key="index1" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
        <el-submenu :index='toSting(index1)' v-if="item1.permission">
          <template slot="title">
            <i :class="[item1.icon]" ></i>
            <span slot="title">{{ item1.name }}</span>
          </template>
          <!-- 二级菜单循环 -->
          <div  v-for="( item2 ,index2 ) in item1.childList" :key="index1+'-'+index2" >
            <div v-if="item2.permission">
              <el-submenu :index="toSting(index1,index2)">
                <span slot="title">{{ item2.name }}</span>
                <!-- 三级菜单循环 -->
                <div v-for="( item3 ,index3 ) in item2.childList" :key="index1+'-'+index2+'-'+index3">
                  <el-menu-item :index="item3.path">{{ item3.name }}</el-menu-item>
                </div>
              </el-submenu>
            </div>
            <div v-else="item2.permission">
              <el-menu-item :index="item2.path">{{ item2.name }}</el-menu-item>
            </div>
          </div>
        </el-submenu>
        <el-menu-item :index='item1.path'  v-else="item1.permission">
          <i :class="[item1.icon]"></i>
          <span slot="title">{{ item1.name }}</span>
        </el-menu-item>
      </el-menu>
      <div class="menuBtn" @click="menuClick">
        <i :class="shrinkIcon" ></i>
      </div>
    </div>
</template>  

<script type="text/ecmascript-6" >

  import axios from 'axios';
  export default {
      name: "Menu",
      components: {

      },
      data(){
          return {
            menuList:'',
            isCollapse: true,
            shrinkIcon:'fa fa-angle-double-right'
          }
      },
      computed: {
      //获取当前路由渲染页面菜单
        defaultActive() {
          return this.$route.path;
        }
      },
      mounted() {
        this.getMenuList();
      },
      methods: {
        menuClick(){
          if( this.isCollapse ){
            this.isCollapse = false
            this.shrinkIcon = "fa fa-angle-double-left"
          }else {
            this.isCollapse = true
            this.shrinkIcon = "fa fa-angle-double-right"
          }
        },
        handleOpen(key, keyPath) {
          console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
          console.log(key, keyPath);
        },
        getMenuList:function(){
          var This=this;
          axios.get("../static/data/menu.json", {}).then(function (response) {
            This.menuList = response.data.list;
          })
        },
        toSting:function(...arg){
          let str='';
          for( var i=0;i<arg.length;i++ ){
            str += String( arg[i] ) + '-';
          }
          if( arg.length>0 ){
            str = str.substr(0, str.length-1);
          }
          return str;
        }
      }
  }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  /deep/ .el-submenu__title,.el-menu-item{
    border-bottom: 1px solid #e5e5e5;
    padding: 1px;
    height: 45px;
    line-height: 40px;
    border-left: 3px solid #f9f9f9;
    padding-left: 10px !important;
  }
  /deep/ .el-menu{
    padding: 0 !important;
    background-color: #f9f9f9;
  }
  .el-menu-item{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .menuLen:not(.el-menu--collapse) {
    width: 200px;
  }
  .el-menu--collapse{
    width: 48px;
  }
  /deep/ .el-submenu__title:hover,.el-menu-item:hover{
    border-left: 3px solid #3382af;
  }
  .el-menu-item:focus, .el-menu-item:hover{
    background-color: #FFFFFF;
    border-left: 3px solid #3382af;
  }
  /deep/ .el-tooltip{
    padding: 0 !important;
    padding-left: 10px !important;;
  }
  .menuBtn{
    line-height: 24px;
    height: 26px;
    text-align: center;
    font-size: 18px;
    position: relative;
    i{
      font-size: 14px;
      padding:0 4px;
      display: inline-block;
      position: relative;
      cursor: pointer;
      border: 1px solid #bbb;
      border-radius: 45%;
      color: #aaa;
      vertical-align: baseline;
      background-color: #FFFFFF;
      z-index: 10;
    }
  }
  .menuBtn:before{
    content: "";
    display: inline-block;
    height: 0;
    border-top: 1px solid #e0e0e0;
    position: absolute;
    left: 8px;
    right: 8px;
    top: 14px;
  }
  .el-menu{
    border-right: none;
  }
  .el-menu-item i{
    margin: 0;
    vertical-align: middle;
    width: 24px;
    text-align: center;
  }
</style>

最后是json数据样式

{
  "status": "0",
  "key2": "value2",
  "list": [
    {
      "name": "dashboard",
      "path":"dashboard",
      "icon": "fa fa-dashboard",
      "id":"1",
      "permission":false,
      "childList":[]
    }, {
      "name": "第二章节",
      "path":"index/main2",
      "icon": "el-icon-s-goods",
      "permission":true,
      "id":"2",
      "childList":[{
        "name": "第二章节-第一小节",
        "icon": "el-icon-upload",
        "permission":true,
        "path":"main2_1",
        "id":"21",
        "childList":[{
          "name": "第二章节-第一小节-第一小节",
          "icon": "el-icon-location",
          "path":"main2_1_1",
          "permission":false,
          "id":"21",
          "childList":[]
        },{
          "name": "第二章节-第一小节-第二小节",
          "icon": "el-icon-location",
          "path":"main2_1_2",
          "permission":false,
          "id":"22",
          "childList":[]
        }]
      },{
        "name": "第二章节-第二小节",
        "icon": "el-icon-upload",
        "path":"main2_2",
        "permission":true,
        "id":"21",
        "childList":[{
          "name": "第二章节-第二小节-第一小节",
          "path":"main2_2_1",
          "icon": "el-icon-location",
          "permission":false,
          "id":"21",
          "childList":[]
        }]
      },{
        "name": "第二章节-第三小节",
        "icon": "el-icon-location",
        "path":"main2_3",
        "permission":false,
        "id":"22",
        "childList":[]
      }]
    }
  ]
}

展示效果如下：