elementui后台左侧菜单,一级、二级、三级菜单功能demo

<template>
  <div :class="{'has-logo':showLogo}">
    <logo v-if="showLogo" :collapse="isCollapse" />
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="rgb(31 45 61)"
        text-color="#fff"
        active-text-color="#ffd04b">
        <template v-for="item in menus">
          <app-link v-if="item.children.length<1" :to="item.path">
            <el-menu-item  :index="item.id">
              <i :class="item.icon"></i>
              <span slot="title">{{ item.name }}</span>
            </el-menu-item>
          </app-link>
          <el-submenu v-else :index="item.id">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{ item.name }}</span>
            </template>

            <template v-for="sub in item.children">
              <app-link v-if="sub.children.length<1"  :to="sub.path">
                <el-menu-item :index="sub.id">{{ sub.name }}</el-menu-item>
              </app-link>
              <el-submenu v-else :index="sub.id">
                <template slot="title">{{ sub.name }}</template>
                <app-link  :to="three.path" v-for="three in sub.children" :index="three.id" >
                  <el-menu-item >{{ three.name }}</el-menu-item>
                </app-link>
              </el-submenu>
            </template>
          </el-submenu>

        </template>

      </el-menu>
    </el-scrollbar>
  </div>

</template>

//js部分,applink组件可以直接用el-link代替,只是一个封装

import { mapGetters } from 'vuex'
import Logo from './Logo'
import variables from '@/styles/variables.scss'
import AppLink from './Link'
export default {
  components: { Logo,AppLink },
  data() {
    return {
      menus:[
        {
          id:'1',
          name:'一级菜单',
          icon:'el-icon-location',
          path:'/',
          children:[
            {
              id:'2',
              name:'二级菜单',
              icon:'el-icon-setting',
              path:'/',
              children:[
                {
                  id:'3',
                  name:'三级菜单',
                  icon:'el-icon-setting',
                  path:'/404',
                }
              ]
            },
            {
              id:'4',
              name:'二级菜单2',
              icon:'el-icon-setting',
              path:'/nested/menu1/menu1-1/index',
              children:[

              ]
            },
          ]
        },
        {
          id:'5',
          name:'一级菜单2',
          icon:'el-icon-location',
          path:'/',
          children:[
            {
              id:'6',
              name:'二级菜单',
              icon:'el-icon-setting',
              path:'/',
              children:[

              ]
            }
          ]
        },
        {
          id:'7',
          name:'一级菜单3',
          icon:'el-icon-location',
          path:'/table/index',
          children:[

          ]
        },
      ]
    }
  },
  computed: {
    ...mapGetters([
      'sidebar'
    ]),
    routes() {
      console.log('r',this.$router.options.routes)
      return this.$router.options.routes
    },
    activeMenu() {
      const route = this.$route
      const { meta, path } = route
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    },
    showLogo() {
      return this.$store.state.settings.sidebarLogo
    },
    variables() {
      return variables
    },
    isCollapse() {
      return !this.sidebar.opened
    }
  },
  methods:{
    handleOpen(key, keyPath) {
      //console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      //console.log(key, keyPath);
    }
  }
}
</script>

效果:

image.png


可以只看menu菜单部分

评论/留言