vue+element UI 實作無限極分類（一）

簡單的例子參考，參考别人的簡書

[
    {
        "id": ,
        "parent_id": ,
        "menu_name": "第一級菜單 1",
        "sorting": ,
        "node": [
            {
                "id": ,
                "parent_id": ,
                "menu_name": "第二級菜單 1-1",
                "sorting": ,
                "node": [
                    {
                        "id": ,
                        "parent_id": ,
                        "menu_name": "第三級菜單 1-1-1",
                        "sorting": 
                    }
                ]
            }
        ]
    },
    {
        "id": ,
        "parent_id": ,
        "menu_name": "第一級菜單 2",
        "sorting": ,
        "node": [
            {
                "id": ,
                "parent_id": ,
                "menu_name": "第二級菜單 2-1",
                "sorting": 
            }
        ]
    }
]
                

建立MenuBar.vue檔案,實作擷取後端資料及布局功能

<template>
    <div>
        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
            <el-radio-button :label="false">展開</el-radio-button>
            <el-radio-button :label="true">收起</el-radio-button>
        </el-radio-group>
        <el-menu class="menu-Bar" :collapse="isCollapse">
            <MenuTree :menuData="this.menuData"></MenuTree>
        </el-menu>
    </div>
</template>
<script>
  import MenuTree from '@/components/MenuTree'

  export default {
    data () {
      return {
        isCollapse: false,
        menuData: []
      }
    },
    props: ['apiUrl'],
    created: function () {
      this.getMenu()
    },
    methods: {
      getMenu: function () {
        this.$http.get(this.apiUrl + 'menu').then(function (response) {
          this.menuData = response.data
        }, function (error) {
          console.log(error)
        })
      }
    },
    components: {
      'MenuTree': MenuTree
    }
  }
</script>
<style>
    .menu-Bar:not(.el-menu--collapse) {
        width: ;
        min-height: ;
    }
</style>
           

建立MenuTree.vue 實作菜單欄列的遞歸渲染

<template>
    <div>
        <template v-for="value in this.menuData">
            <el-submenu index="value.id" v-if="value.node">
                <template slot="title">
                    <i class="el-icon-message"></i>
                    <span slot="title">{{value.menu_name}}</span>
                </template>
                <MenuTree :menuData="value.node"></MenuTree>
            </el-submenu>
            <el-menu-item index="value.id" v-else>
                <i class="el-icon-message"></i>
                <span slot="title">{{value.menu_name}}</span>
            </el-menu-item>
        </template>
    </div>
</template>

<script>
  export default {
    props: ['menuData'],
    name: 'MenuTree'
  }
</script>
           

最後實作效果為