溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編這次要給大家分享的是vue中如何實現Element左側無限級菜單，文章內容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。
最近項目中,要用到element-ui的無限級分類菜單，根據角色生成不同的遞歸數據，查閱了網上很多資料，發現很多都不太完整并且沒有很多的延伸性。
梳理遞歸數據
我們一般拿到后臺的數據是：1.扁平化數據格式2.遞歸式數據格式
let arr = [
{
name:小七,
id:1
},
{
name:小八,
id:2
},
{
name: 小九,
id:3
}
]我們從后臺拿到的是這種扁平化處理數據，那我們實現遞歸菜單的話需要什么數據格式呢，需要格式如下：
let menuItems = [
{
name:小七,
id:1,
children:[
{
name: '啥也不是',
pid:2
}
]
},
{
name:小八,
id:2,
children:[
{
name:'隨便寫哦',
pid:3,
children:[
{
name: '再次深入',
pid: 4,
children:[
{
name: '撒打算',
pid:666
}
]
}
]
}
]
},
{
name: 小九,
id:3
}
]我們就需要類似于以上的這種數據格式：
扁平化數據轉換遞歸數據，下面貼出我的數據處理方法：
注：應為在網上看到的許多的遞歸處理方法都不一樣，有的文章寫于很早很多方法都比較復雜或者代碼比較多余
computed: {
treeData() {
let cloneData = JSON.parse(JSON.stringify(this.tableData)); // 對源數據深度克隆
return cloneData.filter(father => {
let branchArr = cloneData.filter(child => father.id == child.pid); //返回每一項的子級數組
branchArr.length > 0 ? (father.children = branchArr) : ""; //如果存在子級，則給父級添加一個children屬性，并賦值
return father.pid == 0; //返回第一層
});
}
},其中this.tableData就是后臺給到我的扁平化數據，這里將其替換就可以
當時處理此功能時沒有考慮到子級或者父級有可能值位udfriend 所以沒有做判斷，如果想完善此遞歸數據處理的可以完善一下。
數據處理就要開始寫代碼了！
這里用到了vue-ement-ui的左側菜單
老規矩，程序員交流用代碼
index.vue
<el-menu
background-color="#304156"
text-color="#fff"
active-text-color="#409eff"
:collapse="isActive"
:collapse-transition="false"
:unique-opened="true"
:router="true"
:default-active="activePath"
>
<menu-tree :menuData="treeData" @saveNavStart="saveNavStart"></menu-tree>
</el-menu>
這里的激活樣式用的是緩存的辦法
// 保存鏈接的激活狀態
saveNavStart(activePath) {
window.sessionStorage.setItem("activePath", activePath);
this.activePath = activePath;
},
created() {
this.activePath = window.sessionStorage.getItem("activePath");
}menuTree.vue組件
實現左側無限級菜單最重要的就是 組件自身調用自身
廢話不多說，上代碼:
<template>
<div>
<label v-for="menu in menuData" :key="menu.id">
<el-submenu :index="String(menu.id)" v-if="menu.children">
<template slot="title">
<i class="el-icon-edit"></i>
<span>{{menu.menu_name}}</span>
</template>
<label>
<menutree :menuData="menu.children"></menutree>
</label>
</el-submenu>
<el-menu-item :index="menu.path" @click="saveNavStart(menu.path)" v-else>
<i class="el-icon-edit"></i>
<span>{{menu.menu_name}}</span>
</el-menu-item>
</label>
</div>
</template>
methods:{
saveNavStart(activePath) {
this.$emit('saveNavStart',activePath)
}
}
}到此就實現了左側菜單的無限級了，應為現在給公司寫的項目都是權限功能，路由方面呢大家可以隨便寫，公司項目做了權限：左側菜單，按鈕限制，菜單限制，接口限制目前是四種
看完這篇關于vue中如何實現Element左側無限級菜單的文章，如果覺得文章內容寫得不錯的話，可以把它分享出去給更多人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
