使用vue+element-ui實現無限級動態菜單

子組件遞歸調用時, 無需引入, 根據name名稱直接引用

// 父組件

<template>
<el-menu>
   <child-menut :dataList="listData"></child-menu>
 </el-menu>
</template>
<script>
const listData = [
      {
        name: '鈉管設備',
        id: "1",
        level: 1,
        child: [
          {
            name: '系統默認組',
            id: "2",
            flag: true
          },
          {
            name: '設備一組',
            id: "3",
            child: [
              {
                name: '一組A小組',
                id: "4",
                child: [
                  {
                    name: '一組A小組的成員1',
                    id: "5"
                  },
                  {
                    name: '一組A小組的成員2',
                    id: "6",
                    child: [
                      {
                        name: '一組A小組的成員何總',
                        id: "7"
                      },
                      {
                        name: '一組A小組的成員曾',
                        id: "8"
                      },
                      {
                        name: '一組A小組的成員飄總',
                        id: "9"
                      }
                    ]
                  }
                ]
              },
              {
                name: '一組B小組',
                id: "10"
              }
            ]
          },
          {
            name: '設備二組',
            id: "11"
          }
        ]
      }
    ]
<script/>

// childMenu.vue 子組件

<template>
  <div class="menu-tree">
    <label v-for="list in dataList" :key="list.id">
      <el-submenu :index="list.id" v-if="list.child">
        <template slot="title">
          <i class="el-icon-location" v-if="list.level"></i>
          <span>{{list.name}}</span>
        </template>
        <label>
          <child-menu :dataList="list.child"></child-menu>
        </label>
      </el-submenu>
      <el-menu-item v-else :index="list.index">
        <span slot="title">{{list.name}}</span>
      </el-menu-item>
    </label>
  </div>
</template>

<script>
export default {
  name: 'childMenu',
  props: ['dataList']
}
</script>