vue中element UI可折叠式导航菜单(导航列表根据后台数据渲染-动态加载导航菜单)

版本一：可折叠式，数据前台自定义
<template> <div id="index"> <el-aside width="152px" class="asideNav"> <el-menu
:default-active="defaultActive" class="el-menu-vertical" router unique-opened
:collapse="iscollapse" :collapse-transition="false" active-text-color='#29A88D'
background-color="#272D34" text-color="#fff" @open="handleOpen"
@close="handleClose"> <div id="logo" index="/index"> <img
src="../assets/img/logo.png" class="logo"> <span class="tohide">XXXXXXXX</span>
</div> <el-menu-item index="/index/home"> <i class="icon iconfont
icon-home"></i> <span slot="title">总览</span> </el-menu-item> <el-menu-item
index="/index/plate"> <i class="icon iconfont icon-iconsp1"></i> <span
slot="title">版块管理</span> </el-menu-item> <el-submenu index="/index/activity">
<template slot="title"> <i class="icon iconfont icon-shangpinshengou"></i>
<span>活动管理</span> </template> <el-menu-item index="/index/activity"> <i
class="icon iconfont icon-dian"></i> <span>活动管理</span> </el-menu-item>
<el-menu-item index="/index/classify"> <i class="icon iconfont icon-dian"></i>
<span>分类管理</span> </el-menu-item> </el-submenu> <el-submenu
index="/index/goods"> <template slot="title"> <i class="icon iconfont
icon-shangpinliebiao"></i> <span>商品管理</span> </template> <el-menu-item
index="/index/goods"> <i class="icon iconfont icon-dian"></i> <span>商品管理</span>
</el-menu-item> <el-menu-item index="/index/sort"> <i class="icon iconfont
icon-dian"></i> <span>分类管理</span> </el-menu-item> <el-menu-item
index="/index/freight"> <i class="icon iconfont icon-dian"></i>
<span>运费管理</span> </el-menu-item> </el-submenu> </el-menu> <div
class="iscollapse" @click="setcollapse"> <i class="el-icon-arrow-right"
v-if="iscollapse"></i> <i class="el-icon-arrow-left" v-else></i> </div>
</el-aside> <div class="rightContainer"> <el-header class="header"> XXX
</el-header> <el-main> <router-view></router-view> </el-main> <div
class="foot"> XXX </div> </div> </div> </template> <script> import $ from
"jquery"; export default { name: "index", data() { return { defaultActive:
"/index/home", iscollapse: false, logourl: require("../assets/img/logo.jpg"),
username: null, show: false }; }, methods: { setcollapse() { this.iscollapse =
!this.iscollapse; if (this.iscollapse) { $("#logo").css("width", "64px");
$(".el-aside").css("width", "auto"); $(".tohide").css("display", "none"); }
else { $("#logo").css("width", "auto"); $(".el-aside").css("width", "152px");
$(".tohide").css("display", "inline"); } } }, mounted() {} }; </script> <style
scoped> /* 侧边栏 */ #index { display: flex; } .el-aside { background: #272d34;
height: 100vh; /* position: relative; */ } .el-menu-vertical { border-right: 0;
} .el-submenu .el-menu-item { min-width: 150px; } .el-menu-vertical i { color:
#fff !important; font-size: 14px !important; } .is-active { background: #1890ff
!important; color: #fff !important; } #logo { width: 100%; height: 70px;
display: flex; align-items: center; background: #272d34; color: #fff; overflow:
hidden; } .logo { width: 22px; display: block; margin: 0 10px 0 20px; }
.iscollapse { background: #283644; color: #fff; width: 100%; height: 50px;
padding-top: 8px; text-align: center; } .el-aside .iscollapse i { font-size:
40px !important; } /* .tac::-webkit-scrollbar { display: none; } */ #index
.rightContainer { height: 100vh; overflow: auto; flex: 1; /* display: flex;
flex-direction: column; */ } /* 右边头部 */ .el-header { height: 50px !important;
background: #fff !important; padding: 0 !important; line-height: 50px; }
.header ul { display: flex; justify-content: flex-end; align-items: center;
border-bottom: 1px solid #e5e6e7; } .header li { padding: 0 8px; cursor:
pointer; position: relative; } .header .lines { font-weight: 900; color:
#dfdfdf; } .header .help span { color: #2477e7; } .header .operate { height:
50px; padding-right: 20px; } .header .prove { /* display: none; */ width:
100px; position: absolute; z-index: 999; top: 50px; right: 0px; left: 0;
padding: 5px 0px; margin: auto; background: #fff; color: #999; border: 1px
solid #ccc; border-radius: 3px; box-shadow: 0 0 3px 0 #ccc; } .header .prove p
{ line-height: 30px; padding: 0px 10px; } .header .prove p:hover { background:
rgba(24, 144, 255, 0.1); } .header i { color: #2477e7; } .header .user i {
margin-left: 10px; } .header .prove i { color: #999; margin-right: 5px; }
.header .user { display: flex; align-items: center; } .header .operate span {
color: #333; display: block; min-width: 50px; } .header img { width: 30px;
height: 30px; border-radius: 50%; margin-right: 10px; } /* 右边主体部分 */ .el-main {
padding: 0 !important; background: #f7f7f7; } /* 右边底部 */ .foot { text-align:
center; font-size: 12px; padding: 15px; /* height: 80px !important; */ color:
#999; background: #f7f7f7; display: flex; flex-direction: column; align-items:
center; } .foot span { line-height: 22px; transform: scale(0.83); } </style>
需求改变：导航数据要从后台获取再渲染

版本二：可折叠式，动态加载，数据后台获取并渲染（css同上）
<template> <div id="index"> <el-aside width="152px" class="asideNav"> <el-menu
:default-active="defaultActive" class="el-menu-vertical" router unique-opened
:collapse="iscollapse" :collapse-transition="false" active-text-color='#29A88D'
background-color="#272D34" text-color="#fff" @open="handleOpen"
@close="handleClose"> <div id="logo" index="/index"> <img
src="../assets/img/logo.png" class="logo"> <span class="tohide">XXXXXXXX</span>
</div> <div v-for="(item,i) in routers" :key="i"> <el-submenu
:index="item.newcondition" v-if="item.child"> <template slot="title"> <i
:class="item.newicon"></i> <span class="tohide">{{item.title}}</span>
</template> <el-menu-item :index="val.newcondition" v-for="val in item.child"
:key="val.title"> <i class="icon iconfont">*</i> <span>{{val.title}}</span>
</el-menu-item> </el-submenu> <el-menu-item :index="item.newcondition" v-else >
<i :class="item.newicon"></i> <span slot="title">{{item.title}}</span>
</el-menu-item> </div> </el-menu> <div class="iscollapse" @click="setcollapse">
<i class="el-icon-arrow-right" v-if="iscollapse"></i> <i
class="el-icon-arrow-left" v-else></i> </div> </el-aside> <div
class="rightContainer"> <el-header class="header"> XXX </el-header> <el-main>
<router-view></router-view> </el-main> <div class="foot"> XXX </div> </div>
</div> </template> <script> import $ from "jquery"; export default { name:
"index", data() { return { defaultActive: "/index/home", iscollapse: false,
logourl: require("../assets/img/logo.jpg"), username: null, show: false,
routers: [] }; }, methods: { setcollapse() { this.iscollapse =
!this.iscollapse; this.$nextTick(() => { if (this.iscollapse) {
$("#logo").css("width", "64px"); $(".el-aside").css("width", "auto");
$(".tohide,.el-submenu__title .el-icon-arrow-right").css( "display", "none" );
} else { $("#logo").css("width", "auto"); $(".el-aside").css("width", "152px");
$(".tohide,.el-submenu__title .el-icon-arrow-right").css( "display", "inline"
); } }); } }, mounted() { this.$http .post(this.$api.getmenulist, { shop_code:
this.$store.state.shop_code }) .then(res => { console.log(res.data); let data =
res.data; if (data.code == 200 && data.result.length > 0) { this.routers =
data.result; } }) .catch(error => { this.$message.error(error); }); } };
</script>
 

• « 上一篇：7本书带你掌握数据科学中的数学基础（附下载）
• » 下一篇：Bootstrap响应式导航栏点击collapse的按钮无反应，不会向下展开