<template>
<!-- 100vh全屏展示 -->
? <el-container style="height: 100vh; border: 1px solid #eee">
? ? <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
? ? ? <!-- <el-menu :default-openeds="['1', '3']"> 表示默認展開第幾個菜單 -->
? ? ? ? <!-- 1對應了el-submenu index="1" -->
? ? ? <el-menu :default-openeds="['1']" :router="true"><!-- 把router屬性改成true才能實現(xiàn)點擊跳轉(zhuǎn) -->
? ? ? ? <!-- index接收的是字符串類型,(i+1)是數(shù)字類型,所以使用toString方法轉(zhuǎn)成字符串,傳給index -->
? ? ? ? <!-- 因為i是從0開始的 所以需要+1 -->
? ? ? ? <el-submenu :index="(i+1).toString()" v-for="(v,i) in navList" :key="i">
? ? ? ? ? <template slot="title"
? ? ? ? ? ? ><i class="el-icon-menu"></i>{{v.authName}}</template
? ? ? ? ? >
? ? ? ? ? ? <!-- <template slot="title">分組一</template> -->
? ? ? ? ? ? <!-- el-menu-item index="1-1" 表示第一個導航里面的第一個子項 -->
? ? ? ? ? ? <!-- 子選項需要改成例如: 1-1格式 以字符串的形式傳給index屬性 -->
? ? ? ? ? ? <!-- 因為子選項也是一個數(shù)組所以需要再次循環(huán) -->
? ? ? ? ? ? <el-menu-item :index="'/index/'+item.path" v-for="(item,index) in v.children" :key="index">{{item.authName}}</el-menu-item>
? ? ? ? ? ? </el-submenu>
? ? ? </el-menu>
? ? </el-aside>
</template>
調(diào)取接口
? methods:{
? ? getNaviList:function(){
? ? ? axios.get('http://timemeety*****************',{
? ? ? ? headers:{
? ? ? ? ? 'Authorization':localStorage.token
? ? ? ? }
? ? ? })
? ? ? .then(res=>{
? ? ? ? console.log(res);
? ? ? ? let {data,meta} = res.data;
? ? ? ? /* 數(shù)據(jù)獲取成功 */
? ? ? ? if(meta.status==200){
? ? ? ? ? this.navList = data
? ? ? ? }else{
? ? ? ? ? /* 防止數(shù)據(jù)獲取失敗給出相應的后臺提示 */
? ? ? ? ? this.$message.error(meta.msg)
? ? ? ? }
? ? ? })
? ? ? .catch(err=>{
? ? ? ? console.log(err);
? ? ? })
? ? }
? }
};
</script>
效果圖：
代碼展示：
