欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue.js學習之遞歸組件

 更新時間:2016年12月13日 10:32:41   作者:CURRY_zhao  
最近學習vue.js有一段時間了,使用vue做了一套后臺管理系統(tǒng),其中使用最多就是遞歸組件,也因為自己對官方文檔的不熟悉使得自己踩了不少坑,所以今天寫出來和大家一起分享。有需要的朋友們可以參考借鑒,下面來一起看看吧。

遞歸組件

組件在它的模板內可以遞歸地調用自己,只有當它有 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": "數據統(tǒng)計",
          "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計算屬性動態(tài)改變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做的管理系統(tǒng),我接手后用vue完整模仿了一些easyui的東西,下面就是在樹形菜單基礎上模仿出了樹形表格,下圖為完整圖

 

總結

以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流

相關文章

  • Vue?3.0如何配置TypeScript支持(推薦)

    Vue?3.0如何配置TypeScript支持(推薦)

    隨著應用的增長,靜態(tài)類型系統(tǒng)可以幫助防止許多潛在的運行時錯誤,這就是為什么Vue 3是用TypeScript編寫的,本文給大家介紹Vue?3.0如何配置TypeScript支持,感興趣的朋友一起看看吧
    2023-12-12
  • 詳解Vue中的路由與多種守衛(wèi)

    詳解Vue中的路由與多種守衛(wèi)

    路由守衛(wèi)又稱導航守衛(wèi),指是路由跳轉前、中、后過程中的一些鉤子函數,這篇文章主要介紹了Vue中的路由與多種守衛(wèi),需要的朋友可以參考下
    2023-02-02
  • vuex結合session存儲數據解決頁面刷新數據丟失問題

    vuex結合session存儲數據解決頁面刷新數據丟失問題

    在項目中表單篩選項里,選擇完之后刷新頁面數據就變了,沒有保留在自己選擇的選項上。本文使用session存儲數據,具有一定的參考價值,感興趣的可以了解一下
    2021-09-09
  • Vue如何動態(tài)改變列表搜索出關鍵詞的字體顏色

    Vue如何動態(tài)改變列表搜索出關鍵詞的字體顏色

    這篇文章主要介紹了Vue如何動態(tài)改變列表搜索出關鍵詞的字體顏色問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • 如何解決vuex在頁面刷新后數據被清除的問題

    如何解決vuex在頁面刷新后數據被清除的問題

    這篇文章主要介紹了如何解決vuex在頁面刷新后數據被清除的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • 通過vue-cropper選取本地圖片自定義裁切圖片比例

    通過vue-cropper選取本地圖片自定義裁切圖片比例

    這篇文章主要介紹了Vue選取本地圖片,自定義裁切圖片比例?vue-cropper,本文分步驟結合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-07-07
  • vue中組件通信詳解(父子組件, 爺孫組件, 兄弟組件)

    vue中組件通信詳解(父子組件, 爺孫組件, 兄弟組件)

    這篇文章主要介紹了vue中組件通信詳解(父子組件, 爺孫組件, 兄弟組件),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • vue.js將時間戳轉化為日期格式的實現代碼

    vue.js將時間戳轉化為日期格式的實現代碼

    這篇文章主要介紹了vue.js將時間戳轉化為日期格式的實現代碼,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-06-06
  • Vue?插件及瀏覽器本地存儲

    Vue?插件及瀏覽器本地存儲

    這篇文章主要介紹了Vue?插件及瀏覽器本地存儲,插件通常用來為Vue添加全局功能,包含install方法的一個對象。更多相關介紹,需要的小伙伴可以參考下面文章內容
    2022-05-05
  • Vue.js 中 axios 跨域訪問錯誤問題及解決方法

    Vue.js 中 axios 跨域訪問錯誤問題及解決方法

    這篇文章主要介紹了Vue.js 中 axios 跨域訪問錯誤問題及解決方法,非常不錯,具有一定的參考借鑒價值 ,需要的朋友可以參考下
    2018-11-11

最新評論