涉及技術(shù)棧
layui+bootstrap+vue刀森，項目布局時請引入相應(yīng)庫文件。源碼獲缺ㄕ恕：關(guān)注公眾號 扣丁曼 回復(fù)
vue菜單獲取源代碼研底。
1、效果圖
展示效果圖
2透罢、項目代碼
頂部分類欄代碼
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item">
<button @click="changeMenu(1)" class="layui-btn layui-btn-sm layui-btn-radius horizont-menu" href="">系統(tǒng)</button>
</li>
<li class="layui-nav-item">
<button @click="changeMenu(2)" class="layui-btn layui-btn-sm layui-btn-radius horizont-menu" href="">院感</button>
</li>
<li class="layui-nav-item">
<button data-id="2" class="layui-btn layui-btn-sm layui-btn-radius horizont-menu" href="">辦公</button>
</li>
<li class="layui-nav-item">
<button data-id="3" class="layui-btn layui-btn-sm layui-btn-radius horizont-menu" href="">質(zhì)控</button>
</li>
<li class="layui-nav-item">
<button data-id="4" class="layui-btn layui-btn-sm layui-btn-radius horizont-menu" href="">病案</button>
</li>
</ul>
頁面展示li列表（左側(cè)菜單欄）
<div class="layui-side layui-side-menu">
<div class="layui-side-scroll">
<div class="layui-logo">
<span>高級后臺系統(tǒng)</span>
</div>
<ul class="layui-nav layui-nav-tree " id="LAY-system-side-menu" lay-filter="layadmin-system-side-menu" lay-shrink="all">
<li v-for="(val,key) in menus" data-name="home" class="layui-nav-item">
<!--非一級欄目則使用href跳轉(zhuǎn)并禁止跳轉(zhuǎn)-->
<a v-if="val.son.length" href="javascript:;" :lay-tips='val.name' lay-direction="2">
<i class="fa fa-paste layui-font"></i>
<cite v-text='val.name'></cite>
<span class="layui-nav-more"></span>
</a>
<!-- 一級欄目則使用lay-href跳轉(zhuǎn) -->
<a v-else :lay-href="val.url" :lay-tips='val.name' lay-direction="2">
<i class="fa fa-home layui-font"></i>
<cite v-text='val.name'></cite>
</a>
<dl v-if="val.son.length" class="layui-nav-child">
<dd v-for="(v,k) in val.son" data-name="console" class="">
<a :lay-href="v.son.length ? ' javascript:; ' : v.url">{{v.name}}</a>
<dl v-if="v.son.length" class="layui-nav-child">
<dd v-for="(vv,kk) in v.son" data-name="console" class="">
<a :lay-href="vv.son.length ? 'javascript:; ' : v.url">{{vv.name}}</a>
</dd>
</dl>
</dd>
</dl>
</li>
</ul>
</div>
</div>
頁面js代碼（vue部分）
<script>
var vm = new Vue({
el: '#LAY_app',
data: {
menus: [{
"name": "歡迎頁",
"url": "/indexPage",
"icon": "",
"son": []
}, {
"name": "文章管理",
"url": "/index/orders",
"icon": "layui-font",
"son": [{
"name": "文章列表",
"url": "/article",
"icon": "",
"son": []
}, {
"name": "文章分類",
"url": "/index_cate",
"icon": "",
"son": []
}, {
"name": "二級菜單",
"url": "/index_s",
"icon": "",
"son": [{
"name": "三級菜單",
"url": "/index_sj",
"icon": "",
"son": []
}]
}]
},
{
"name": "系統(tǒng)設(shè)置",
"url": "/system",
"icon": "",
"son": [
{
"name": "用戶設(shè)置",
"url": "/system",
"icon": "",
"son": []
},
{
"name": "權(quán)限設(shè)置",
"url": "/system",
"icon": "",
"son": []
}
]
},
]
},
methods: {
changeMenu: function (id) {
//初始化tab標(biāo)簽,如果未使用tab選項卡則注釋下面一行
$("#tab-home").siblings().remove();
this.menus = [{
"name": "廣告管理",
"url": "/index/orders",
"icon": "",
"key": true,
"son": [{
"name": "廣告列表",
"url": "/adv",
"icon": "",
"son": []
}, {
"name": "其他",
"url": "#",
"icon": "",
"son": []
}]
}]
}
}
})
</script>
