vuejs實現(xiàn)遞歸樹型菜單組件
更新時間：2018年01月13日 10:22:01 作者：陽光正好
本篇文章主要介紹了vuejs實現(xiàn)遞歸樹型菜單組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
前言
前段時間使用vue做了一套后臺管理系統(tǒng)，其中使用最多就是遞歸組件，也因為自己對官方文檔的不熟悉使得自己踩了不少坑，今天寫出來和大家一起分享。
遞歸組件
組件在它的模板內(nèi)可以遞歸地調(diào)用自己，只有當它有 name 選項時才可以。 在官網(wǎng)這句話就是關(guān)鍵定義組件是一定要有name屬性。
模擬數(shù)據(jù)格式如下：
[
{
"id": "1",
"menuName": "基礎管理",
"menuCode": "10",
"children": [
{
"menuName": "用戶管理",
"menuCode": "11"
},
{
"menuName": "角色管理",
"menuCode": "12",
"children": [
{
"menuName": "管理員",
"menuCode": "121"
},
{
"menuName": "CEO",
"menuCode": "122"
},
{
"menuName": "CFO",
"menuCode": "123"
},
{
"menuName": "COO",
"menuCode": "124"
},
{
"menuName": "普通人",
"menuCode": "124"
}
]
},
{
"menuName": "權(quán)限管理",
"menuCode": "13"
}
]
},
{
"id": "2",
"menuName": "商品管理",
"menuCode": ""
},
{
"id": "3",
"menuName": "訂單管理",
"menuCode": "30",
"children": [
{
"menuName": "訂單列表",
"menuCode": "31"
},
{
"menuName": "退貨列表",
"menuCode": "32",
"children": []
}
]
},
{
"id": "4",
"menuName": "商家管理",
"menuCode": "",
"children": []
}
]
html我們思路按照ul里面套li，無限ul套li，標題用div元素包裹，
<template>
<li>
<span @click="toggle"> <!-- toggle:點擊關(guān)閉展開 -->
<i v-if="isFolder" class="icon" :class="[open ? 'folder-open' : 'folder']" @cilck="toggle"></i>
<!-- <i v-if="isFolder" class="icon " :class="[open ? 'folder-open' : 'folder']"></i> -->
<i v-if="!isFolder" class="icon folder-text"></i>
{{model.menuName}}
</span>
<ul v-show="open" v-if="isFolder">
<treeMenu v-for="item in model.children" :model="item"></treeMenu>
</ul>
</li>
</template>
官方文檔里面寫的遞歸組件強調(diào)了使用name屬性
需要注意的是，由父組件傳遞過來的數(shù)據(jù)要先進行深拷貝哦
深拷貝：把props賦值到data里，賦值的同時深拷貝一下，data里 JSON.parse(JSON.stringify(這個值就行了))，data值自己命名
export default {
name: 'treeMenu',
//props: ['model'], //這樣和下面效果一樣
props: {
model: { type: Object },
},
components: {},
}
按照vue的思想，不操作Dom樹，我們定義兩個變量，一個顯示隱藏子菜單(open),一個存不存子菜單修改圖標(isFolder)。
data() {
return {
open: false, //一個顯示隱藏子菜單(open)
//isFolder: true //這個不要寫死，運用計算屬性計算看存不存在
}
},
利用vue計算屬性動態(tài)改變isFolder的值，修改圖標，判斷存在不子級和子級長度
computed: {
isFolder() { //利用vue計算屬性動態(tài)改變isFolder的值，修改圖標，判斷存在不子級和子級長度
// return this.model.children && this.model.children.length //和下面效果一樣
let isFolder = false
if (this.model.children && this.model.children.length) {
isFolder = true;
} else {
isFolder = false;
}
return isFolder
}
},
顯示隱藏事件
methods: {
toggle() {
if (this.isFolder) {
this.open = !this.open
}
}
},
寫到這里我們已經(jīng)做完一個樹形菜單了
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
el-tree設置選中高亮/焦點高亮、選中節(jié)點加深背景及更改字體顏色等的方法
el-tree默認有較淺的背景色,這里業(yè)務需要,選中節(jié)點的字體高亮,更改顏色,下面這篇文章主要給大家介紹了關(guān)于el-tree選中高亮/焦點高亮、選中節(jié)點加深背景及更改字體顏色等的設置方法,需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細介紹了vue中常用的幾種表單rules驗證方式,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-10-10
這篇文章主要介紹了vue查找指令和模板,基本思路是需要判斷當前遍歷到的節(jié)點是一個元素還是一個文本，隨著思路的展開我們就來實現(xiàn)這個功能，需要的朋友可以參考下2023-10-10
今天小編就為大家分享一篇vue-cli監(jiān)聽組件加載完成的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue 手機物理監(jiān)聽鍵+退出提示代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了TinyMCE富文本編輯器在Vue中的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
淺談Vue2.0中v-for迭代語法的變化(key、index)
下面小編就為大家分享一篇淺談Vue2.0中v-for迭代語法的變化(key、index)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細介紹了Vue.js實現(xiàn)tab切換效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要介紹了VScode格式化ESlint方法(最全最好用方法),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
大家在vue項目中當刪除或者增加一條記錄的時候希望當前頁面可以重新刷新，但是vue框架自帶的router是不支持刷新當前頁面功能,所以本文就給大家分享了七種vue實現(xiàn)當前頁面刷新的方法,需要的朋友可以參考下2023-07-07