element ui菜单导航栏的动态创建

<template>
  <div class="dropList">
    <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="el-menu-vertical-demo"
      :collapse="isCollapse"
      v-for="item in navMenu"
      :key="item.index"
    >
      <el-submenu :index="item.index" v-if="item.childs">
        <template slot="title">
          <i :class="item.icon"></i>
          <span slot="title">{{ item.alias }}</span>
        </template>
        <template v-for="item1 in item.childs">
          <el-submenu v-if="item1.childs" :key="item1.id" :index="item1.index">
            <template slot="title">
              <span slot="title">{{ item1.alias }}</span>
            </template>
            <template v-for="item2 in item1.childs">
              <el-submenu
                v-if="item2.childs"
                :key="item2.id"
                :index="item2.index"
              >
                <template slot="title">
                  <span slot="title">{{ item2.alias }}</span>
                </template>
                <template v-for="item3 in item2.childs">
                   <el-menu-item v-if="item3.childs==null" :key="item3.id" :index="item3.index">             {{item3.alias}}
                   </el-menu-item>
                </template>
              </el-submenu>
            </template>
          </el-submenu>
        </template>
        <template v-for="item1 in item.childs">
          <el-menu-item
            v-if="item1.childs == null"
            :key="item1.id"
            :index="item1.index"
          >
            <span>{{ item1.alias }}</span>
          </el-menu-item>
        </template>
      </el-submenu>
      <el-menu-item
        v-if="item.childs == null"
        :key="item.id"
        :index="item.index"
      >
        <i :class="item.icon"></i>
        <span>{{ item.alias }}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      isCollapse: true,
      navMenu: [ 
        {
          id: "id13",
          index: "id13",
          icon: "el-icon-s-tools",
          alias: "精准扶贫",
          childs: [],
        },
        {
          id: "id14",
          index: "id14",
          icon: "el-icon-s-order",
          alias: "返贫监测预警",
        },
      ],
    };
  },
</script>

数据处理

     for (var i in secondList) {
            var temp = {
              id: "id2"+i,
              index: "id2"+i,
              icon: "",
              alias: secondList[i],
              childs: [],
            };
            secondData.push(temp);
          }
          var temps = secondData[0]; 
          for (var i in village_name) {
            temps.childs.push({
              id: "id3"+i,
              index: "id3"+i,
              icon: "",
              alias: village_name[i],
              childs: [],
            });  
          }

由于一级菜单数据不是从后台获取的，直接写上（如果是从后台获取的，只需要定义一个空数组即可），二三四级数据从后台获取后处理成需要的格式。