el-menu自定义的导航

**

Layout(整体的框架)

**

<template>
  <div>
    <el-radio-group v-model="isCollapse" style="margin-left: 320px;">
      <el-radio-button :label="false">展开</el-radio-button>
      <el-radio-button :label="true">收起</el-radio-button>
    </el-radio-group>
    <Sidebar :menu-list="menuList" :collapse="isCollapse" />
  </div>
</template>
<script>
import Sidebar from '@/layout/components/SideBar.vue'
export default {
  name: 'Layout',
  components: {
    Sidebar
  },
  data() {
    return {
      isCollapse: false,
      'menuList': [
        {
          'path': '1', // 菜单项所对应的路由路径
          'title': '功能1', // 菜单项名称
          'children': [] // 是否有子菜单，若没有，则为[]
        },
        {
          'path': '2',
          'title': '功能5555552'
        //   'children': []
        },
        {
          'path': '3',
          'title': '功能3',
          'children': [
            {
              'path': '3-1',
              'title': '功能3-1'
            //   'children': []
            },
            {
              'path': '3-2',
              'title': '功能3-2',
              'children': [
                {
                  'path': '3-2-1',
                  'title': '功能3-2-1'
                //   'children': []
                }
              ]
            },
            {
              'path': '3-3',
              'title': '功能3-3'
            //   'children': []
            }
          ]
        },
        {
          'path': '4',
          'title': '功能4',
          'children': [
            {
              'path': '4-1',
              'title': '功能4-1'
            }
          ]
        }

      ]

    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    }
  }

}
</script>
<style  scroped>

</style>

---

SideBar

---

<template>
  <el-menu default-active="3-2-1" class="el-menu-vertical-demo" :collapse="collapse" @open="handleOpen" @close="handleClose">
    <sidebar-item v-for="menu in menuList" :key="menu.path" :item="menu" :collapse="collapse" />
  </el-menu>
</template>
<script>

import SidebarItem from './SidebarItem'

export default {
  name: 'Sidebar',
  components: { SidebarItem },
  props: {
    menuList: {
      type: Array,
      required: true
    },
    collapse: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>
<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>

SidebarItem

<template>
  <div>
    <div v-if="item.children">
      <template v-if="item.children.length == 0">
        <el-menu-item :index="item.path">
          <i class="el-icon-document" />
          <span slot="title">{{ item.title }}</span>
        </el-menu-item>
      </template>
      <el-submenu v-else :index="item.path">
        <template slot="title">
          <i class="el-icon-location" />
          <span v-show="!collapse" slot="title">{{ item.title }}</span>
        </template>
        <template v-for="child in item.children">
          <sidebar-item
            v-if="child.children&&child.children.length>0"
            :key="child.path"
            :item="child"
          />
          <el-menu-item v-else :key="child.path" :index="child.path">
            <i class="el-icon-location" />
            {{ child.title }}
          </el-menu-item>
        </template>
      </el-submenu>
    </div>
    <div v-else>
      <template>
        <el-menu-item :index="item.path">
          <i class="el-icon-document" />
          <span slot="title">{{ item.title }}</span>
        </el-menu-item>
      </template>
    </div>
  </div>
</template>

<script>

export default {
  name: 'SidebarItem',
  props: {
    item: {
      type: Object,
      required: true
    },
    collapse: {
      type: Boolean,
      default: false
    }
  }
}
</script>