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

Vue自定義樹(shù)形控件使用詳解

 更新時(shí)間:2021年08月17日 11:53:27   作者:AcongMiss  
這篇文章主要為大家詳細(xì)介紹了Vue自定義樹(shù)形控件的使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Vue自定義樹(shù)形控件的使用方法,供大家參考,具體內(nèi)容如下

效果圖:

數(shù)據(jù)結(jié)構(gòu):

tree: {
        title: '', //  標(biāo)題(姓名) 
        key: '0',
        head: '', // 頭像
        selectStatus: false, // checkBox選中狀態(tài)
        children: [
          {
            title: '旺旺一部',
            key: '0-0',
            head: '',
            selectStatus: false,
            children: [
              {
                key: '0-0-0',
                title: '旺仔1',
                head: require('@/assets/wan.jpg'),
                selectStatus: false
              }
            ]
          },
          {
            title: '旺旺二部',
            key: '0-1',
            head: '',
            selectStatus: false,
            children: [
              {
                title: '旺旺二部一隊(duì)',
                key: '0-1-0',
                head: '',
                selectStatus: false,
                children: [
                  {
                    title: '旺旺二部一隊(duì)一班',
                    key: '0-1-0-2',
                    head: '',
                    selectStatus: false,
                    children: [
                      {
                        title: '旺仔3',
                        key: '0-1-0-2-0',
                        head: require('@/assets/wan.jpg'),
                        selectStatus: false
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
},

思路:

/*自定義樹(shù)形控件的核心就是“組件自己調(diào)用自己”  這里將樹(shù)形控件封裝成一個(gè)子組件*/
<template>
  <div>
    <div class="tree-custom">
      <div :style="indent" @click="toggleChildren"> //toggleChildren事件為“展開(kāi)內(nèi)容”、“關(guān)閉內(nèi)容”的控制事件  
       /* 
       這里是遞歸數(shù)據(jù)顯示的具體內(nèi)容    
       例如:本項(xiàng)目遞歸的具體內(nèi)容從效果圖上看就是“圖片/頭像”、“標(biāo)題/名字”、“null/CheckBox”
       效果圖顯示邏輯是:
       <div v-if="!headImg && label" >
       //如果沒(méi)有頭像圖片有標(biāo)題,則顯示 “箭頭-標(biāo)題”樣式
        </div>
        <div v-if="headImg">
       //如果有頭像圖片,則顯示 “頭像-姓名-checkBox”樣式
        </div>
       */      
      </div>
      <tree-custom  // “自己調(diào)用自己”
        :key="children.key"  // key值唯一 
        v-for="children in treeData"  
        v-if="showChildren"  //  根據(jù) toggleChildren事件 判斷是否展開(kāi)內(nèi)容
        :treeData="children.children"   //  下面都是一些屬性,應(yīng)該都能看懂吧!不多說(shuō)了!
        :label="children.title"
        :headImg="children.head"
        :pkid="children.key"
        :depth="depth+1"  //  這個(gè)是用來(lái)控制每行縮進(jìn)的樣式,可移步下方=>indent ()看具體用處
        :selectStatus="children.selectStatus"
        v-bind="$attrs"  //  這兩個(gè)是用來(lái)實(shí)現(xiàn)祖孫組件通信的
        v-on="$listeners"
      >
      </tree-custom>
    </div>
  </div>
</template>
<script>
export default {
  name: 'TreeCustom', // 要給我們的組件一個(gè)名字!不然怎么調(diào)用呢
  data () {
    return {
      showChildren: true,  // 這個(gè)就是控制是否顯示內(nèi)容的data~也就是展開(kāi)和收起!
      currentInfoData: {} // 這個(gè)的用處是獲取當(dāng)前行的數(shù)據(jù),為了簡(jiǎn)潔在上方代碼的具體用處已經(jīng)被我刪掉了~意義不大
    }
  },
  //對(duì)象的默認(rèn)值應(yīng)由一個(gè)工廠函數(shù)返回,避免采坑
  props: {
    treeData: {
      type: Array,
      default: () => []
    },
    label: {
      type: String,
      default: () => ''
    },
    depth: {
      type: Number,
      default: () => 0
    },
    headImg: {
      type: String,
      default: () => ''
    },
    pkid: {
      type: String,
      default: () => ''
    },
    selectStatus: {
      type: Boolean,
      default: () => null
    }
  },
  computed: {
    indent () {  // 定義不同層級(jí)的縮進(jìn)樣式
      return { transform: `translate(${(this.depth - 1) * 15}px)` }
    }
  },
  methods: {
    toggleChildren () {
      this.showChildren = !this.showChildren
    },
    checkBoxSelectChange (e) {
      const checked = e.target.checked
      if (checked) {
       //使用$listeners方法調(diào)用祖輩的函數(shù),因?yàn)檫@邊是遞歸組件所以組件之間可能并不是嚴(yán)格的父子關(guān)系,所以$emit、$parent等方法都是不合適的
        this.$listeners.addSelectedData(this.currentInfoData)
      }
      if (!checked) {
        this.$listeners.deleteSelectedData(this.currentInfoData)
      }
    },
    getCurrentInfo (label, headImg, pkid) {
      this.currentInfoData = {
        key: pkid,
        title: label,
        head: headImg
      }
    }
  }
}
</script>
/*組件調(diào)用方法*/
<div class="tree-scroll">
  <tree-custom
    :label="tree.title"
    :headImg="tree.head"
    :treeData="tree.children"
    :pkid="tree.key"
    :depth="0"
    :selectStatus="tree.selectStatus"
    @addSelectedData="addSelectedData"
    @deleteSelectedData="deleteSelectedData" />
</div>

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 關(guān)于element的表單組件整理筆記

    關(guān)于element的表單組件整理筆記

    這篇文章主要給大家介紹了關(guān)于element的表單組件的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2021-02-02
  • vue+elementUI實(shí)現(xiàn)多文件上傳與預(yù)覽功能實(shí)戰(zhàn)記錄(word/PDF/圖片/docx/doc/xlxs/txt)

    vue+elementUI實(shí)現(xiàn)多文件上傳與預(yù)覽功能實(shí)戰(zhàn)記錄(word/PDF/圖片/docx/doc/xlxs/txt)

    這篇文章主要給大家介紹了關(guān)于利用vue+elementUI實(shí)現(xiàn)多文件上傳與預(yù)覽功能的相關(guān)資料,包括word/PDF/圖片/docx/doc/xlxs/txt等格式文件上傳,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-08-08
  • 在移動(dòng)端使用vue-router和keep-alive的方法示例

    在移動(dòng)端使用vue-router和keep-alive的方法示例

    這篇文章主要介紹了在移動(dòng)端使用vue-router和keep-alive的方法示例,vue-router與keep-alive提供的路由體驗(yàn)與移動(dòng)端是有一定差別的,感興趣的小伙伴們可以參考一下
    2018-12-12
  • Vue 圖片壓縮并上傳至服務(wù)器功能

    Vue 圖片壓縮并上傳至服務(wù)器功能

    這篇文章主要介紹了Vue 圖片壓縮并上傳至服務(wù)器功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-01-01
  • VUE中的mapState和mapActions的使用詳解

    VUE中的mapState和mapActions的使用詳解

    在VUE項(xiàng)目中經(jīng)常會(huì)用到mapState和mapActions,mapState主要用于同步全局的變量或者對(duì)象,這篇文章主要介紹了VUE中的mapState和mapActions的使用,需要的朋友可以參考下
    2022-06-06
  • vue項(xiàng)目配置同一局域網(wǎng)可使用ip訪問(wèn)的操作

    vue項(xiàng)目配置同一局域網(wǎng)可使用ip訪問(wèn)的操作

    這篇文章主要介紹了vue項(xiàng)目配置同一局域網(wǎng)可使用ip訪問(wèn)的操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-10-10
  • vue elementui tree 任意級(jí)別拖拽功能代碼

    vue elementui tree 任意級(jí)別拖拽功能代碼

    這篇文章主要介紹了vue elementui tree 任意級(jí)別拖拽功能代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-08-08
  • vue如何從后臺(tái)下載.zip壓縮包文件

    vue如何從后臺(tái)下載.zip壓縮包文件

    這篇文章主要介紹了vue如何從后臺(tái)下載.zip壓縮包文件,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • 強(qiáng)大Vue.js組件淺析

    強(qiáng)大Vue.js組件淺析

    這篇文章主要為大家介紹了Vue.js組件,組件是Vue.js最強(qiáng)大的功能之一,感興趣的小伙伴們可以參考一下
    2016-09-09
  • 利用vueJs實(shí)現(xiàn)圖片輪播實(shí)例代碼

    利用vueJs實(shí)現(xiàn)圖片輪播實(shí)例代碼

    本篇文章主要介紹了利用vueJs實(shí)現(xiàn)圖片輪播實(shí)例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-06-06

最新評(píng)論