vuejs遞迴組件

標籤：管理   子功能表   model   default   cli   修改   周報   顯示   樣式   

前言

　　學習vue有一段時間了，最近使用vue做了一套後台管理系統，其中使用最多就是遞迴組件，也因為自己對官方文檔的不熟悉使得自己踩了不少坑，今天寫出來和大家一起分享。

遞迴組件

　　組件在它的模板內可以遞迴地調用自己，只有當它有 name 選項時才可以。 在官網這句話就是關鍵定義組件是一定要有name屬性。按照這個思路我們開動吧。

　　實現最終：

　　　　

 

　　類比資料格式如下：

　　　　

var data = [{                "id": "1",                "data": {                    "menuName": "專案管理",                    "menuCode": "",                },                "childTreeNode": [{                    "data": {                        "menuName": "項目",                        "menuCode": "BusProject",                    },                    "childTreeNode": []                }, {                    "data": {                        "menuName": "我的工作",                        "menuCode": "BusProject",                    },                    "childTreeNode": []                }, {                    "data": {                        "menuName": "人員周報",                        "menuCode": "BusProject",                    },                    "childTreeNode": []                }]            }, {                "id": "2",                "data": {                    "menuName": "資料統計",                    "menuCode": "BusClock",                },                "childTreeNode": []            }, {                "id": "3",                "data": {                    "menuName": "人事管理",                    "menuCode": "",                },                "childTreeNode": []            }, {                "id": "4",                "data": {                    "menuName": "基礎管理",                    "menuCode": "",                },                "childTreeNode": []            }]

html我們思路按照ul裡面套li，無限ul套li，標題用div元素包裹，

<li>    <div @click=‘toggle‘>
　　         <i v-if=‘isFolder‘ class="fa " :class="[open?‘fa-folder-open‘:‘fa-folder‘]"></i>
　　　　　<!--isFolder判斷是否存在子級改變表徵圖-->         <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>

官方文檔裡面寫的遞迴組件強調了使用name屬性

export default {    name: ‘items‘,    props: [‘model‘],    components: {},}

按照vue的思想，不操作Dom樹，我們定義兩個變數，一個顯示隱藏子功能表(open),一個存不存子功能表修改表徵圖(isFolder)。

data() {        return {             open: false,             isFolder: true        }}

利用vue計算屬性動態改變isFolder的值，修改表徵圖，判斷存在不子級和子級長度

computed: {    isFolder() {        return this.model.childTreeNode && this.model.childTreeNode.length    }}        

顯示隱藏事件

methods: {
　　toggle: function() {      if(this.isFolder) {          this.open = !this.open      }　　}
}

寫到這裡我們已經做完一個樹形菜單了如下，最終樣式就留給大家自己去實現了我在貼出完整代碼供大家參考。

<template>    <li>        <div @click=‘toggle‘>            <i v-if=‘isFolder‘ class="fa " :class="[open?‘fa-folder-open‘:‘fa-folder‘]"></i>            <!--isFolder判斷是否存在子級改變表徵圖-->            <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做的管理系統，我接手後用vue完整模仿了一些easyui的東西，下面就是在樹形菜單基礎上模仿出了樹形表格，對此感興趣或者需要的可以聯絡我。為完整圖

 

 分類: JavaScript

vuejs遞迴組件