Vue實作樹狀視圖資料步驟詳解-js教程-PHP中文網

首頁

web前端

js教程

Vue實作樹狀視圖資料步驟詳解

php中世界最好的语言

May 12, 2018 am 11:17 AM

數據步驟視圖

這次帶給大家Vue實作樹狀視圖資料步驟詳解，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 
       } 
      } 
     } 
    } 
   } 
  } 
 }

登入後複製

程式碼如下

treelist.vue

<template> 
<p> 
 <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> 
</p> 
</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> 
 <p id="app"> 
  <tree :treelist="treeList"></tree> 
   
 </p> 
</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 
 } 
})

登入後複製

在經過踩坑之後，我發現Vue官網有類似的案例，連結→ 傳送門

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

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

這樣一個元件處理一個對象寫的好處是什麼呢

我可以在元件內自訂開關了

我在data裡定義了變數open,因為元件遞歸，所以相當於每個元件都有屬於自己的open

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

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

#定義了計算屬性，依據children來判斷是否繼續執行

在span標籤上綁定了一個自訂事件

更改open 的值

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

登入後複製

#實現效果

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

#在這裡記錄一下，以後遇到類似問題留個印象

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

##找了很久的問題，發現是因為元件內忘記寫name了，自身使用自身必須填入name，並且與標籤名一致

一開始的實作方法，利用元件遞歸，顯示出目前等級的name渲染出來，並將其中的children 中的所有物件傳給自己然後接著執行相同操作，直到children沒有數據，值得一提的是

，如果這裡不加上v-if 就會變成死迴圈,就會一直執行下去，所以我們要判斷一下目前執行的物件到底還有沒有下一層

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

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

我們看一下結果

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

#然後我點選了A

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

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

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

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7543

CakePHP 教程

1381

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

如何在iPhone中使Google地圖成為預設地圖 Apr 17, 2024 pm 07:34 PM

iPhone上的預設地圖是Apple專有的地理位置供應商「地圖」。儘管地圖越來越好，但它在美國以外的地區運作不佳。與谷歌地圖相比，它沒有什麼可提供的。在本文中，我們討論了使用Google地圖成為iPhone上的預設地圖的可行性步驟。如何在iPhone中使Google地圖成為預設地圖將Google地圖設定為手機上的預設地圖應用程式比您想像的要容易。請依照以下步驟操作–先決條件步驟–您必須在手機上安裝Gmail。步驟1–開啟AppStore。步驟2–搜尋“Gmail”。步驟3–點選Gmail應用程式旁

升級微信最新版本的步驟（輕鬆掌握微信最新版本的升級方法） Jun 01, 2024 pm 10:24 PM

不斷推出新版本以提供更好的使用體驗，微信作為中國的社交媒體平台之一。升級微信至最新版本是非常重要的，家人和同事的聯繫、為了保持與朋友、及時了解最新動態。 1.了解最新版本的特性與改進了解最新版本的特性與改進非常重要，在升級微信之前。效能改進和錯誤修復，透過查看微信官方網站或應用程式商店中的更新說明、你可以了解新版本所帶來的各種新功能。 2.檢查目前微信版本我們需要檢查目前手機上已安裝的微信版本、在升級微信之前。點擊，打開微信應用“我”然後選擇，菜單“關於”在這裡你可以看到當前微信的版本號，。 3.打開應

此 Apple ID 尚未在 iTunes Store 中使用：修復 Jun 10, 2024 pm 05:42 PM

使用AppleID登入iTunesStore時，可能會在螢幕上拋出此錯誤提示「此AppleID尚未在iTunesStore中使用」。沒有什麼可擔心的錯誤提示，您可以按照這些解決方案集進行修復。修正1–更改送貨地址此提示出現在iTunesStore中的主要原因是您的AppleID個人資料中沒有正確的地址。步驟1–首先，開啟iPhone上的iPhone設定。步驟2–AppleID應位於所有其他設定的頂部。所以，打開它。步驟3–在那裡，打開“付款和運輸”選項。步驟4–使用面容ID驗證您的存取權限。步驟

使用ddrescue在Linux上恢復數據 Mar 20, 2024 pm 01:37 PM

DDREASE是一種用於從檔案或區塊裝置(如硬碟、SSD、RAM磁碟、CD、DVD和USB儲存裝置)復原資料的工具。它將資料從一個區塊設備複製到另一個區塊設備，留下損壞的資料區塊，只移動好的資料區塊。 ddreasue是一種強大的恢復工具，完全自動化，因為它在恢復操作期間不需要任何干擾。此外，由於有了ddasue地圖文件，它可以隨時停止和恢復。 DDREASE的其他主要功能如下：它不會覆寫恢復的數據，但會在迭代恢復的情況下填補空白。但是，如果指示工具明確執行此操作，則可以將其截斷。將資料從多個檔案或區塊還原到單

開源！超越ZoeDepth！ DepthFM：快速且精確的單目深度估計！ Apr 03, 2024 pm 12:04 PM

0.這篇文章乾了啥？提出了DepthFM：一個多功能且快速的最先進的生成式單目深度估計模型。除了傳統的深度估計任務外，DepthFM還展示了在深度修復等下游任務中的最先進能力。 DepthFM效率高，可以在少數推理步驟內合成深度圖。以下一起來閱讀這項工作~1.論文資訊標題：DepthFM:FastMonocularDepthEstimationwithFlowMatching作者：MingGui,JohannesS.Fischer,UlrichPrestel,PingchuanMa,Dmytr

Shazam應用程式在iPhone中無法運作：修復 Jun 08, 2024 pm 12:36 PM

iPhone上的Shazam應用程式有問題？ Shazam可協助您透過聆聽歌曲找到歌曲。但是，如果Shazam無法正常工作或無法識別歌曲，則必須手動對其進行故障排除。修復Shazam應用程式不會花費很長時間。因此，無需再浪費時間，請按照以下步驟解決Shazam應用程式的問題。修正1–禁用粗體文字功能iPhone上的粗體文字可能是Shazam無法正常運作的原因。步驟1–您只能從iPhone設定執行此操作。所以，打開它。步驟2–接下來，開啟其中的「顯示和亮度」設定。步驟3–如果您發現啟用了“粗體文本

iPhone螢幕截圖不起作用：如何修復 May 03, 2024 pm 09:16 PM

螢幕截圖功能在您的iPhone上不起作用嗎？截圖非常簡單，因為您只需同時按住「提高音量」按鈕和「電源」按鈕即可抓取手機螢幕。但是，還有其他方法可以在設備上捕獲幀。修復1–使用輔助觸控使用輔助觸控功能截取螢幕截圖。步驟1–轉到您的手機設定。步驟2–接下來，點選以開啟「輔助功能」設定。步驟3–開啟「觸摸」設定。步驟4–接下來，開啟「輔助觸控」設定。步驟5–打開手機上的「輔助觸控」。步驟6–打開“自訂頂級選單”以存取它。步驟7–現在，您只需將這些功能中的任何一個連結到螢幕擷取即可。因此，點擊那裡的首

iPhone中缺少時鐘應用程式：如何修復 May 03, 2024 pm 09:19 PM

您的手機中缺少時鐘應用程式嗎？日期和時間仍將顯示在iPhone的狀態列上。但是，如果沒有時鐘應用程序，您將無法使用世界時鐘、碼錶、鬧鐘等多項功能。因此，修復時鐘應用程式的缺失應該是您的待辦事項清單的首位。這些解決方案可以幫助您解決此問題。修復1–放置時鐘應用程式如果您錯誤地從主畫面中刪除了時鐘應用程序，您可以將時鐘應用程式放回原位。步驟1–解鎖iPhone並開始向左側滑動，直到到達「應用程式庫」頁面。步驟2–接下來，在搜尋框中搜尋「時鐘」。步驟3–當您在搜尋結果中看到下方的「時鐘」時，請按住它並

See all articles

Vue實作樹狀視圖資料步驟詳解

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題