赞
踩
list数据
list: [ { item "icon": "el-icon-s-order", "name": "订单管理", "path": "/orderManage" "childrenMenu": [ itemChild { "icon": "el-icon-waller", "name": "充值卡", "path": "/orderManage/rechargeCard", "children": [ itemChild_child { "name": "充值卡管理", "path": "/orderManage/rechargeCard/rechargeCardManage" }, { "name": "充值记录", "path": "/orderMange/rechargeCard/rechargeRecord" }, { "name": "消费记录", "path": "/orderManage/rechargeCard/payRecord" } ] } ] } ]
adide.vue
<el-menu default-active="/orderManage/rechargeCard/rechargeCardManage" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"> <!--一级菜单--> <template v-for="item in list"> <el-submenu v-if="item.childrenMenu && item.childrenMenu.length" :index="item.path" :key="item.path"> <template slot="title"> <i :class="item.icon"></i> <span>{{item.name}}</span> </template> <!--二级菜单--> <template v-for="itemChild in item.childrenMenu"> <el-submenu v-if="itemChild.children && itemChild.children.length" :index="itemChild.path" :key="itemChild.path"> <template slot="title"> <i :class="itemChild.icon"></i> <span>{{itemChild.name}}</span> </template> <!--三级菜单--> <el-menu-item v-for="itemChild_child in itemChild.children" :index="itemChild_child.path" :key="itemChild_child.path"> <span slot="title">{{itemChild_child.name}}</span> </el-menu-item> </el-submenu> <el-menu-item v-else :index="itemChild.path" :key="itemChild.path">{{itemChild.name}}</el-menu-item> </template> </el-submenu> <el-menu-item v-else :index="item.path" :key="item.path"> <i :class="item.icon"></i> <span slot="title">{{item.name}}</span> </el-menu-item> </template> </el-menu>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。