vue elementui 遞歸 sidebar可伸縮側邊欄

最近在學習vue 作了一個可伸縮的 側邊欄 記錄下 在不少管理系統都用到 管理系統通常都長的差很少

首先是收起時候

展開時候

首先是新建一個Layout.vue

<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 :menuList="menuList" :collapse="isCollapse"/>
  </div>
</template>
<script>
import Sidebar from './components/side/SideBar.vue'
export default {
  name:'Layout',
  components:{
    Sidebar
  },
  data(){
    return{
      isCollapse: false,
       "menuList" : [
            {
              "path": "1",     //菜單項所對應的路由路徑
              "title": "功能1",     //菜單項名稱
              "children":[]        //是否有子菜單，若沒有，則爲[]
            },
            {
            "path": "2",
             "title": "功能2",
             "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 lang="stylus" scroped>

</style>

 

 

SideBar.vue

<template>
<el-menu default-active="3-2-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="collapse">
  <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 lang="stylus">
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }





</style>

 

SidebarItem.vue

<template>


<div v-if="item.children">
  <template v-if="item.children.length == 0">
    <el-menu-item :index="item.path">
      <i class="el-icon-document"></i>
      <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"></i>
      <span slot="title" v-show="!collapse">{{item.title}}</span>
    </template>

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

  </el-submenu>

</div>


</template>

<script>

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

 

 期中不知道爲何 

<template slot="title">
      <i class="el-icon-location"></i>
      <span slot="title" v-show="!collapse">{{item.title}}</span>
    </template>

這裏的titlle怎麼都不能在收起的時候隱藏掉 我試驗element官網給的例子怎麼均可以，後來沒辦法 把collapse帶到這個組件裏 用 v-show設置下 哪位大神知道爲啥也但願能夠提示下