vue與element實現動態渲染選單欄的方法
阿新 • • 發佈：2021-01-09
技術標籤：vue.js
第一種：vue + element 之 el-menu
此種方法適用於固定的三層之內的動態資料渲染選單，若要實現無線選單需使用遞迴,請看第二種方法。
@select ： 選單欄啟用回撥
1、資料結構：
menuData :[
{
index: '/',
icon: 'el-icon-menu',
title: '導航',
id:1,
// children:[
// {
// index: '/',
// title: '選項1', 2、程式碼結構：
<!--
:default-active 一進頁面預設顯示的頁面
unique-opened 保持一個子選單的開啟
router 採用路由模式 選單上的index就是點選跳轉的頁面
text-color 選單文字的顏色
active-text-color 選單啟用後文字的顏色
-->
<el-menu
:default-active="$route.path"
class="el-menu-vertical-demo"
unique-opened
router
background-color="#2a3f54"
text-color="#fff"
active-text-color="orangered"
@select="handleSelect"
>
<template v-for="item in menuData" >
<el-menu-item :index="item.index" v-if="item.children == undefined">
<template slot="title">
<i :class="item.icon"></i>
<span>{{item.title}}</span>
</template>
</el-menu-item>
<el-submenu :index="item.index" v-if="item.children != undefined" >
<template slot="title">
<i :class="item.icon"></i>
<span slot="title">{{item.title}}</span>
</template>
<template v-for="item2 in item.children" >
<el-menu-item :index="item2.index" v-if="item2.children == undefined">{{item2.title}}</el-menu-item>
<el-submenu :index="item2.index" v-if="item2.children != undefined" >
<template slot="title">
<span slot="title">{{item2.title}}</span>
</template>
<template v-for="item3 in item2.children" >
<el-menu-item :index="item3.index">{{item3.title}}</el-menu-item>
</template>
</el-submenu>
</template>
</el-submenu>
</template>
</el-menu>
3、效果圖：
第二種：vue + element 之 el-menu
此種方法為遞迴實現無線選單
1、資料結構
menuData :[
{
index: '/',
icon: 'el-icon-menu',
title: '導航',
id:1,
},
{
index: '/one',
icon: 'el-icon-menu',
title: '導航二',
id:2,
children: [
{
index: '/one',
title: '導航二選項1',
id:2-1,
},
{
index: '/two',
title: '導航二選項2',
id:2-2,
}
]
},
{
index: '/two1',
icon: 'el-icon-menu',
title: '導航三',
id:3,
children:[
{
index: '/two1',
title: '導航三選項1',
id:3-1,
},
{
index: '/two2',
title: '導航三選項2',
id:3-2,
},
{
index: '/two31',
title: '導航三選項3',
id:3-3,
children:[
{
index: '/two31',
title: '導航三選項111',
id:3-3-1,
},
{
index: '/two32',
title: '導航三選項222',
id:3-3-2,
children:[
{
index: '/two321',
title: '導航三選項222-1',
id:3-3-2-1,
},
]
}
]
}
]
},
],
2、程式碼結構
（1） 首先在components中新建一個元件 MenuTree.vue
（2）元件的程式碼結構為：
<template>
<div>
<template v-for="menu in this.menuData">
<el-submenu :key="menu.id" :index="menu.index" v-if="menu.children">
<template slot="title">
<i :class="menu.icon"></i>
<span slot="title">{{menu.title}}</span>
</template>
<menu-tree :menuData="menu.children"></menu-tree>
</el-submenu>
<el-menu-item :key="menu.id" :index="menu.index" v-else>
<i :class="menu.icon"></i>
<span slot="title">{{menu.title}}</span>
</el-menu-item>
</template>
</div>
</template>
<script>
export default {
props: ['menuData'],
name: 'MenuTree'
}
</script>
（3） 在需要使用元件的檔案中匯入元件 並註冊元件
import MenuTree from '../components/MenuTree'
components: {
MenuTree
},
（4）在需要使用元件的地方插入元件
<!--
:default-active 一進頁面預設顯示的頁面
unique-opened 保持一個子選單的開啟
router 採用路由模式 選單上的index就是點選跳轉的頁面
text-color 選單文字的顏色
active-text-color 選單啟用後文字的顏色
-->
<el-menu
:default-active="$route.path"
class="el-menu-vertical-demo"
unique-opened
router
background-color="#2a3f54"
text-color="#fff"
active-text-color="orangered"
@select="handleSelect"
>
<menu-tree :menuData="menuData"></menu-tree>
</el-menu>
3、效果圖
第三種： vue + element 之 el-tree
此種方法利用遞迴實現了無限迴圈 但需要對資料進行一定的格式處理
1、資料結構
一： 請求資料 賦值給本地資料
that.menuList1 = res.data.menuList
that.menuList1[0].urlPath = that.menuList1[0].menuUrl[0].urlPath
that.menuList1[0].menuUrl = []
that.setMenus(that.menuList1)
that.menuList = that.menuList1
that.loading = false
二： 對資料進行處理
setMenus(menus) {
if (!menus || !menus.length) return;
menus.forEach(t => {
if (t.menus && !t.menus.length && t.menuUrl && t.menuUrl.length) {
t.menus = t.menuUrl.map(m => {
return {
id: m.id,
menuTitle: m.urlTitle,
...m
};
});
}
this.setMenus(t.menus);
});
},
2、程式碼結構
<el-tree
v-show="isCollapseFont"
:data="menuList"
node-key="id"
:default-expand-all="false"
expand-on-click-node
auto-expand-parent
@node-click = "clickFn"
:props="defaultProps"
icon-class="el-icon-arrow-left"
:accordion="true"
:render-after-expand="false"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span class="icon" style="font-size: 0.085rem;float: left;margin-left: 0.1rem;margin-right: 0.05rem">
<span :class="data.menuIcon"></span>
</span>
<span style="font-size: 0.09rem;float: left">{{ node.label }}</span>
</span>
</el-tree>
3、效果圖
