Vue如何實(shí)現(xiàn)樹(shù)形視圖數(shù)據(jù)功能

let all={ 
  name:'all', 
  children:{ 
   A:{ 
    name:'A', 
    children:{ 
     a1:{ 
      name:'a1', 
      children:{ 
       a11:{  
        name:'a11', 
        children:null 
       }, 
       a12:{  
        name:'a12', 
        children:null 
       } 
      } 
     }, 
     a2:{ 
      name:'a2', 
      children:{ 
       b21:{  
        name:'b21', 
        children:null 
       } 
      } 
     } 
    } 
   }, 
   B:{ 
    name:'B', 
    children:{ 
     b1:{ 
      name:'b1', 
      children:{ 
       b11:{  
        name:'b11', 
        children:null 
       }, 
       b12:{  
        name:'b12', 
        children:null 
       } 
      } 
     }, 
     b2:{ 
      name:'b2', 
      children:{ 
       b21:{  
        name:'b21', 
        children:null 
       } 
      } 
     } 
    } 
   } 
  } 
 }

index.js

import Vue from 'vue'; 
import tree from '../components/treelist.vue' 
let all={ 
  name:'all', 
  children:{ 
   A:{ 
    name:'A', 
    children:{ 
     a1:{ 
      name:'a1', 
      children:{ 
       a11:{  
        name:'a11', 
        children:null 
       }, 
       a12:{  
        name:'a12', 
        children:null 
       } 
      } 
     }, 
     a2:{ 
      name:'a2', 
      children:{ 
       b21:{  
        name:'b21', 
        children:null 
       } 
      } 
     } 
    } 
   }, 
   B:{ 
    name:'B', 
    children:{ 
     b1:{ 
      name:'b1', 
      children:{ 
       b11:{  
        name:'b11', 
        children:null 
       }, 
       b12:{  
        name:'b12', 
        children:null 
       } 
      } 
     }, 
     b2:{ 
      name:'b2', 
      children:{ 
       b21:{  
        name:'b21', 
        children:null 
       } 
      } 
     } 
    } 
   } 
  } 
 } 
const app=new Vue({ 
 el:"#app", 
 components:{ 
  'tree':tree 
 }, 
 data:{ 
  treeList:all 
 } 
})

在經(jīng)過(guò)踩坑之后，我發(fā)現(xiàn)Vue官網(wǎng)有類似的案例，鏈接→ 傳送門(mén)

參考過(guò)官網(wǎng)的方法后，我嘗試著實(shí)現(xiàn)了一下

這樣寫(xiě)和我踩坑時(shí)的 思路不同點(diǎn)在于， 這樣一個(gè)組件只負(fù)責(zé)一個(gè) 對(duì)象,遍歷每個(gè)children 中的對(duì)象，逐個(gè)傳入組件處理，而我第一次嘗試則是 將整個(gè)children  傳入自身   是一個(gè)組件處理多個(gè)對(duì)象，（第一次嘗試的失敗案例，有興趣請(qǐng)看最下方）

這樣一個(gè)組件處理一個(gè)對(duì)象 寫(xiě)的好處是什么呢

我可以在組件內(nèi)自定義開(kāi)關(guān)了

我在data里定義了變量open,因?yàn)榻M件遞歸，所以相當(dāng)于每個(gè)組件都有個(gè)屬于自己的open

那為什么第一次踩坑時(shí)我不可以用這種方法呢，因?yàn)槲业谝淮螄L試 是一個(gè)組件處理多個(gè)對(duì)象 就是相當(dāng)于 一個(gè)開(kāi)關(guān)控制 children中的所有對(duì)象，當(dāng)開(kāi)關(guān)打開(kāi)時(shí)會(huì)導(dǎo)致 這個(gè)同級(jí)的所有 對(duì)象都被展開(kāi)

遍歷children 挨個(gè)傳入組件自身    用v-show 來(lái)控制是否顯示 

定義了一個(gè)計(jì)算屬性，依據(jù)children來(lái)判斷是否繼續(xù)執(zhí)行 

在span標(biāo)簽上綁定了一個(gè)自定義事件

更改open 的值 

{{treelist.name}}

實(shí)現(xiàn)效果

以下 是我剛開(kāi)始嘗試的時(shí)候踩得坑

在這里記錄一下，以后遇到類似問(wèn)題留個(gè)印象

首先上來(lái)就遇到了這樣的報(bào)錯(cuò)

找了很久的問(wèn)題，發(fā)現(xiàn)是因?yàn)榻M件內(nèi)忘記寫(xiě)name了，自身使用自身必須填寫(xiě)name，并且與標(biāo)簽名一致

一開(kāi)始的實(shí)現(xiàn)方法，利用組件遞歸，顯示出當(dāng)前級(jí)的name渲染出來(lái)，并將其中的 children 中的所有對(duì)象 傳給自己然后接著執(zhí)行相同操作，直到children沒(méi)有數(shù)據(jù)，值得一提的是

，如果這里不加上 v-if 就會(huì)變成 死循環(huán),就會(huì)一直執(zhí)行下去，所以我們要判斷一下當(dāng)前執(zhí)行的對(duì)象到底還有沒(méi)有下一級(jí)

這里我數(shù)據(jù)有稍微的改動(dòng)，所以我第一次傳入的數(shù)據(jù)就是(index.html頁(yè)面)

然后我定義了一個(gè)事件來(lái)處理 每一層的關(guān)閉和開(kāi)啟，我用彈框來(lái)查看Isopen 的值是否被改變

我們看一下結(jié)果

剛進(jìn)入頁(yè)面時(shí)，括號(hào)中的undefined是 Isopen 當(dāng)前的值，因?yàn)榇藭r(shí)未被定義，所以為undefined

然后我點(diǎn)擊了A

因?yàn)榇藭r(shí)isopen已被反轉(zhuǎn)值，所以此時(shí)isopen為true

但是頁(yè)面仍毫無(wú)變化，不說(shuō)展開(kāi)功能，就連undefined也沒(méi)變化

經(jīng)過(guò)一番百度 ，發(fā)現(xiàn)原來(lái)是vue本身已經(jīng)不允許這樣直接更改 Props接受過(guò)來(lái)的值了

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫(kù)只關(guān)注視圖層，方便與第三方庫(kù)和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)復(fù)雜的單頁(yè)應(yīng)用。

以上是“Vue如何實(shí)現(xiàn)樹(shù)形視圖數(shù)據(jù)功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！