使用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>

转载于:https://www.cnblogs.com/wenjuan-blog/p/11547966.html