Vue如何實現樹形視圖數據功能-創(chuàng)新互聯

小編給大家分享一下Vue如何實現樹形視圖數據功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯公司是一家專注于成都網站設計、成都網站建設與策劃設計,永豐網站建設哪家好?成都創(chuàng)新互聯公司做網站,專注于網站建設十多年,網設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:永豐等地區(qū)。永豐做網站價格咨詢:13518219792

利用簡單的樹形視圖實現，熟悉了組件的遞歸使用

這是模擬的樹形圖數據

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 
       } 
      } 
     } 
    } 
   } 
  } 
 }

代碼如下

treelist.vue

<template> 
<div> 
 <ul> 
  <li > 
   <span @click="isshow()">{{treelist.name}}</span> 
    <tree v-for="item in treelist.children"  
     v-if="isFolder" 
     v-show="open" 
     :treelist="item" 
     :keys="item" 
    ></tree> 
  </li> 
 </ul> 
</div> 
</template> 
<script> 
export default { 
 name:'tree', 
 props:['treelist'], 
 data(){ 
  return{ 
   open:false 
  } 
 },computed:{ 
  isFolder:function(){ 
   return this.treelist.children 
   } 
  } 
 ,methods:{ 
  isshow(){ 
   if (this.isFolder) { 
    this.open =!this.open 
   } 
  } 
 } 
} 
</script> 
<style lang="less"> 
</style>

index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 <title>樹形圖</title> 
</head> 
<body> 
 <div id="app"> 
  <tree :treelist="treeList"></tree> 
   
 </div> 
</body> 
</html>

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 
 } 
})

在經過踩坑之后，我發(fā)現Vue官網有類似的案例，鏈接→ 傳送門

參考過官網的方法后，我嘗試著實現了一下

這樣寫和我踩坑時的思路不同點在于，這樣一個組件只負責一個對象,遍歷每個children 中的對象，逐個傳入組件處理，而我第一次嘗試則是將整個children 傳入自身是一個組件處理多個對象，（第一次嘗試的失敗案例，有興趣請看最下方）

這樣一個組件處理一個對象寫的好處是什么呢

我可以在組件內自定義開關了

我在data里定義了變量open,因為組件遞歸，所以相當于每個組件都有個屬于自己的open

那為什么第一次踩坑時我不可以用這種方法呢，因為我第一次嘗試是一個組件處理多個對象就是相當于一個開關控制 children中的所有對象，當開關打開時會導致這個同級的所有對象都被展開

遍歷children 挨個傳入組件自身用v-show 來控制是否顯示

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

在span標簽上綁定了一個自定義事件

更改open 的值

<span @click="isshow()">{{treelist.name}}</span>

Vue如何實現樹形視圖數據功能

實現效果

以下是我剛開始嘗試的時候踩得坑

在這里記錄一下，以后遇到類似問題留個印象

首先上來就遇到了這樣的報錯

找了很久的問題，發(fā)現是因為組件內忘記寫name了，自身使用自身必須填寫name，并且與標簽名一致

一開始的實現方法，利用組件遞歸，顯示出當前級的name渲染出來，并將其中的 children 中的所有對象傳給自己然后接著執(zhí)行相同操作，直到children沒有數據，值得一提的是

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

Vue如何實現樹形視圖數據功能

這里我數據有稍微的改動，所以我第一次傳入的數據就是(index.html頁面)

Vue如何實現樹形視圖數據功能

然后我定義了一個事件來處理每一層的關閉和開啟，我用彈框來查看Isopen 的值是否被改變

Vue如何實現樹形視圖數據功能

我們看一下結果

剛進入頁面時，括號中的undefined是 Isopen 當前的值，因為此時未被定義，所以為undefined

Vue如何實現樹形視圖數據功能

然后我點擊了A

Vue如何實現樹形視圖數據功能

因為此時isopen已被反轉值，所以此時isopen為true

Vue如何實現樹形視圖數據功能

但是頁面仍毫無變化，不說展開功能，就連undefined也沒變化

Vue如何實現樹形視圖數據功能

經過一番百度，發(fā)現原來是vue本身已經不允許這樣直接更改 Props接受過來的值了

vue是什么

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

以上是“Vue如何實現樹形視圖數據功能”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯成都網站設計公司行業(yè)資訊頻道！

另外有需要云服務器可以了解下創(chuàng)新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網頁名稱：Vue如何實現樹形視圖數據功能-創(chuàng)新互聯
當前路徑：http://sd-ha.com/article40/jjieo.html

成都網站建設公司_創(chuàng)新互聯，為您提供標簽優(yōu)化、企業(yè)網站制作、軟件開發(fā)、手機網站建設、網站改版、面包屑導航

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯

猜你還喜歡下面的內容

久久久精品一区ed2k-女人被男人叉到高潮的视频-中文字幕乱码一区久久麻豆樱花-俄罗斯熟妇真实视频

Vue如何實現樹形視圖數據功能-創(chuàng)新互聯

vue是什么