vue.js學(xué)習(xí)之遞歸組件
遞歸組件
組件在它的模板內(nèi)可以遞歸地調(diào)用自己,只有當(dāng)它有 name 選項(xiàng)時(shí)才可以。 在官網(wǎng)這句話就是關(guān)鍵定義組件是一定要有name屬性。按照這個(gè)思路我們開動(dòng)吧。
實(shí)現(xiàn)最終效果圖:
模擬數(shù)據(jù)格式如下:
var data = [{ "id": "1", "data": { "menuName": "項(xiàng)目管理", "menuCode": "", }, "childTreeNode": [{ "data": { "menuName": "項(xiàng)目", "menuCode": "BusProject", }, "childTreeNode": [] }, { "data": { "menuName": "我的任務(wù)", "menuCode": "BusProject", }, "childTreeNode": [] }, { "data": { "menuName": "人員周報(bào)", "menuCode": "BusProject", }, "childTreeNode": [] }] }, { "id": "2", "data": { "menuName": "數(shù)據(jù)統(tǒng)計(jì)", "menuCode": "BusClock", }, "childTreeNode": [] }, { "id": "3", "data": { "menuName": "人事管理", "menuCode": "", }, "childTreeNode": [] }, { "id": "4", "data": { "menuName": "基礎(chǔ)管理", "menuCode": "", }, "childTreeNode": [] }]
html我們思路按照ul里面套li,無(wú)限ul套li,標(biāo)題用div元素包裹,
<li> <div @click='toggle'> <i v-if='isFolder' class="fa " :class="[open?'fa-folder-open':'fa-folder']"></i> <!--isFolder判斷是否存在子級(jí)改變圖標(biāo)--> <i v-if='!isFolder' class="fa fa-file-text"></i> {{model.data.menuName}} </div> <ul v-show="open" v-if='isFolder'> <items v-for='cel in model.childTreeNode' :model='cel'></items> </ul> </li>
官方文檔里面寫的遞歸組件強(qiáng)調(diào)了使用name屬性
export default { name: 'items', props: ['model'], components: {}, }
按照vue的思想,不操作Dom樹,我們定義兩個(gè)變量,一個(gè)顯示隱藏子菜單(open),一個(gè)存不存子菜單修改圖標(biāo)(isFolder)。
data() { return { open: false, isFolder: true } }
利用vue計(jì)算屬性動(dòng)態(tài)改變isFolder的值,修改圖標(biāo),判斷存在不子級(jí)和子級(jí)長(zhǎng)度
computed: { isFolder() { return this.model.childTreeNode && this.model.childTreeNode.length } }
顯示隱藏事件
methods: { toggle: function() { if(this.isFolder) { this.open = !this.open } } }
寫到這里我們已經(jīng)做完一個(gè)樹形菜單了如下,最終樣式就留給大家自己去實(shí)現(xiàn)了我在貼出完整代碼供大家參考。
<template> <li> <div @click='toggle'> <i v-if='isFolder' class="fa " :class="[open?'fa-folder-open':'fa-folder']"></i> <!--isFolder判斷是否存在子級(jí)改變圖標(biāo)--> <i v-if='!isFolder' class="fa fa-file-text"></i> {{model.data.menuName}} </div> <ul v-show="open" v-if='isFolder'> <items v-for='cel in model.childTreeNode' :model='cel'></items> </ul> </li> </template> <script type="text/javascript"> export default { name: 'items', props: ['model'], components: {}, data() { return { open: false, isFolder: true } }, computed: { isFolder: function() { return this.model.childTreeNode && this.model.childTreeNode.length } }, methods: { toggle: function() { if(this.isFolder) { this.open = !this.open } }, } } </script>
公司最開始是使用easyui做的管理系統(tǒng),我接手后用vue完整模仿了一些easyui的東西,下面就是在樹形菜單基礎(chǔ)上模仿出了樹形表格,下圖為完整圖
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如果有疑問(wèn)大家可以留言交流
相關(guān)文章
vuex結(jié)合session存儲(chǔ)數(shù)據(jù)解決頁(yè)面刷新數(shù)據(jù)丟失問(wèn)題
在項(xiàng)目中表單篩選項(xiàng)里,選擇完之后刷新頁(yè)面數(shù)據(jù)就變了,沒(méi)有保留在自己選擇的選項(xiàng)上。本文使用session存儲(chǔ)數(shù)據(jù),具有一定的參考價(jià)值,感興趣的可以了解一下2021-09-09Vue如何動(dòng)態(tài)改變列表搜索出關(guān)鍵詞的字體顏色
這篇文章主要介紹了Vue如何動(dòng)態(tài)改變列表搜索出關(guān)鍵詞的字體顏色問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10如何解決vuex在頁(yè)面刷新后數(shù)據(jù)被清除的問(wèn)題
這篇文章主要介紹了如何解決vuex在頁(yè)面刷新后數(shù)據(jù)被清除的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05通過(guò)vue-cropper選取本地圖片自定義裁切圖片比例
這篇文章主要介紹了Vue選取本地圖片,自定義裁切圖片比例?vue-cropper,本文分步驟結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07vue.js將時(shí)間戳轉(zhuǎn)化為日期格式的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue.js將時(shí)間戳轉(zhuǎn)化為日期格式的實(shí)現(xiàn)代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06Vue.js 中 axios 跨域訪問(wèn)錯(cuò)誤問(wèn)題及解決方法
這篇文章主要介紹了Vue.js 中 axios 跨域訪問(wèn)錯(cuò)誤問(wèn)題及解決方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-11-11