vuejs實(shí)現(xiàn)遞歸樹(shù)型菜單組件
前言
前段時(shí)間使用vue做了一套后臺(tái)管理系統(tǒng)，其中使用最多就是遞歸組件，也因?yàn)樽约簩?duì)官方文檔的不熟悉使得自己踩了不少坑，今天寫出來(lái)和大家一起分享。
遞歸組件
組件在它的模板內(nèi)可以遞歸地調(diào)用自己，只有當(dāng)它有 name 選項(xiàng)時(shí)才可以。 在官網(wǎng)這句話就是關(guān)鍵定義組件是一定要有name屬性。
模擬數(shù)據(jù)格式如下：
[
{
"id": "1",
"menuName": "基礎(chǔ)管理",
"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，無(wú)限ul套li，標(biāo)題用div元素包裹，
<template>
<li>
<span @click="toggle"> <!-- toggle:點(diǎn)擊關(guān)閉展開(kāi) -->
<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>
官方文檔里面寫的遞歸組件強(qiáng)調(diào)了使用name屬性
需要注意的是，由父組件傳遞過(guò)來(lái)的數(shù)據(jù)要先進(jìn)行深拷貝哦
深拷貝：把props賦值到data里，賦值的同時(shí)深拷貝一下，data里 JSON.parse(JSON.stringify(這個(gè)值就行了))，data值自己命名
export default {
name: 'treeMenu',
//props: ['model'], //這樣和下面效果一樣
props: {
model: { type: Object },
},
components: {},
}
按照vue的思想，不操作Dom樹(shù)，我們定義兩個(gè)變量，一個(gè)顯示隱藏子菜單(open),一個(gè)存不存子菜單修改圖標(biāo)(isFolder)。
data() {
return {
open: false, //一個(gè)顯示隱藏子菜單(open)
//isFolder: true //這個(gè)不要寫死，運(yùn)用計(jì)算屬性計(jì)算看存不存在
}
},
利用vue計(jì)算屬性動(dòng)態(tài)改變isFolder的值，修改圖標(biāo)，判斷存在不子級(jí)和子級(jí)長(zhǎng)度
computed: {
isFolder() { //利用vue計(jì)算屬性動(dòng)態(tài)改變isFolder的值，修改圖標(biāo)，判斷存在不子級(jí)和子級(jí)長(zhǎng)度
// 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)做完一個(gè)樹(shù)形菜單了
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue動(dòng)態(tài)添加屬性到data的實(shí)現(xiàn)
在vue中請(qǐng)求接口中，一個(gè)請(qǐng)求方法可能對(duì)應(yīng)后臺(tái)兩個(gè)請(qǐng)求接口，所以請(qǐng)求參數(shù)就會(huì)有所不同。需要我們先設(shè)置共同的參數(shù)，然后根據(jù)條件動(dòng)態(tài)添加參數(shù)屬性2022-08-08
vue3父子組件通信之子組件修改父組件傳過(guò)來(lái)的值
這篇文章主要介紹了vue3父子組件通信之子組件修改父組件傳過(guò)來(lái)的值,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-05-05
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片上傳到后臺(tái)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
Vue微信公眾號(hào)網(wǎng)頁(yè)分享的示例代碼
這篇文章主要介紹了Vue微信公眾號(hào)網(wǎng)頁(yè)分享的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
詳解Vue demo實(shí)現(xiàn)商品列表的展示
這篇文章主要介紹了Vue demo實(shí)現(xiàn)商品列表的展示，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vue3中defineProps傳值使用ref響應(yīng)式失效詳解
這篇文章主要給大家介紹了關(guān)于vue3中defineProps傳值使用ref響應(yīng)式失效的相關(guān)資料,文章通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
在uniapp中實(shí)現(xiàn)圖形驗(yàn)證碼的詳細(xì)步驟
圖形驗(yàn)證碼是一種常見(jiàn)的安全措施,用于防止自動(dòng)化軟件（機(jī)器人）濫用網(wǎng)站資源,如自動(dòng)提交表單,這篇文章主要介紹了在uniapp中實(shí)現(xiàn)圖形驗(yàn)證碼的詳細(xì)步驟,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-11-11
vue實(shí)現(xiàn)登錄數(shù)據(jù)的持久化的使用示例
在Vue.js中,實(shí)現(xiàn)登錄數(shù)據(jù)的持久化需要使用瀏覽器提供的本地存儲(chǔ)功能,Vue.js支持使用localStorage和sessionStorage來(lái)實(shí)現(xiàn)本地存儲(chǔ),本文就來(lái)介紹一下如何實(shí)現(xiàn),感興趣的可以了解一下2023-10-10
element-ui樹(shù)形控件后臺(tái)返回的數(shù)據(jù)+生成組織樹(shù)的工具類
這篇文章主要介紹了element-ui樹(shù)形控件后臺(tái)返回的數(shù)據(jù)+生成組織樹(shù)的工具類，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
vue3.0找不到模塊“./App.vue”或其相應(yīng)的類型聲明(多種情況分析)
這篇文章主要介紹了vue3.0找不到模塊“./App.vue”或其相應(yīng)的類型聲明,報(bào)錯(cuò)原因是typescript?只能理解?.ts?文件，無(wú)法理解?.vue文件，本文通過(guò)多種情況分析給大家詳細(xì)講解，需要的朋友可以參考下2023-01-01