admin/src/components/siderBar/index.vue

<template>
  <div class="siderBar">
    <el-row class="tac">
      <el-col>
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose">
          <template v-for="(item,index) in menu">
            <el-submenu v-if="item.children.length" :index="String(index)" :key="index">
              <template slot="title">
                <span>{{item.MenuName}}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item v-for="(subItem,subIndex) in item.children" :key="subIndex" :index="String(index)+'-'+String(subIndex)">
                  <router-link :to="{name:subItem.Url,query:{}}" active-class="active">{{subItem.MenuName}}</router-link>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item v-else :index="String(index)" :key="index">
              <span slot="title">{{item.MenuName}}</span>
            </el-menu-item>
          </template>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: '',
  props: ['menu'],
  data () {
    return {

    }
  },
  mounted () {
    this.$nextTick(function () {
      // console.log(this.menu)
    })
  },
  methods: {
    handleOpen (key, keyPath) {
      // console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      // console.log(key, keyPath)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "page.scss";
</style>