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