<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-menuclass="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-submenuv-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-itemv-if="item1.childs == null":key="item1.id":index="item1.index"><span>{{item1.alias }}</span></el-menu-item></template></el-submenu><el-menu-itemv-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: [],}); }
由于一级菜单数据不是从后台获取的，直接写上（如果是从后台获取的，只需要定义一个空数组即可），二三四级数据从后台获取后处理成需要的格式。
