Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Schritte zum Implementieren von Baumansichtsdaten in Vue

Detaillierte Erläuterung der Schritte zum Implementieren von Baumansichtsdaten in Vue

php中世界最好的语言Original: 2018-05-12 11:17:202324Durchsuche

Dieses Mal werde ich Ihnen die Schritte zum Implementieren von Baumansichtsdaten in Vue ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für Vue, um Baumansichtsdaten zu implementieren? .

Dies sind simulierte Treemap-Daten

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

Der Code lautet wie folgt

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

Nachdem ich die Fallstricke durchgegangen war, fand ich einen ähnlichen Fall auf der offiziellen Website von Vue, Link → Portal

Nachdem ich auf die Methode auf der offiziellen Website verwiesen hatte , Ich habe es versucht Der Unterschied zwischen dem Schreiben von

wie diesem und meiner Idee, als ich in die Falle trat, besteht darin, dass eine solche Komponente nur für ein Objekt verantwortlich ist, die Objekte in jedem Kind durchläuft und Übergibt sie einzeln zur Verarbeitung an die Komponente. Es handelt sich um eine Komponente, die mehrere Objekte verarbeitet, siehe unten.

Eine solche Komponente verarbeitet ein Objekt. Welche Vorteile hat das Schreiben?

Ich kann den Schalter innerhalb der Komponente anpassen

Ich habe die Variable offen definiert in Daten. Da die Komponente rekursiv ist, entspricht sie jeder Komponente.

Warum kann ich diese Methode dann nicht verwenden? Wenn ich zum ersten Mal die Grube betrete, besteht ein Versuch darin, dass eine Komponente mehrere Objekte verarbeitet. Dies entspricht einem Schalter, der alle Objekte in untergeordneten Objekten steuert. Wenn der Schalter aktiviert ist, werden alle Objekte derselben Ebene aktiviert zu erweitern

Untergeordnete Elemente durchlaufen und die Komponente selbst einzeln übergeben. Verwenden Sie v-show, um zu steuern, ob

definiert ein Berechnungs-

-Attribut , um zu bestimmen, ob die Ausführung basierend auf untergeordneten Elementen fortgesetzt werden soll

Binden Sie ein benutzerdefiniertes Ereignis an das Span-Tag

Ändern Sie den Wert von open

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

Erzielen Sie den Effekt

Im Folgenden sind die Fallstricke aufgeführt, auf die ich gestoßen bin, als ich es zum ersten Mal versucht habe.

Notieren Sie es hier und hinterlassen Sie einen Eindruck, wenn Sie in Zukunft auf ähnliche Probleme stoßen.

Dieser Fehler ist mir aufgefallen, als Ich bin zuerst auf

gestoßen. Nachdem ich lange nach dem Problem gesucht hatte, stellte ich fest, dass es daran lag, dass ich vergessen hatte, den Namen in die Komponente zu schreiben . Ich muss den Namen eingeben, wenn ich ihn verwende, und er muss mit dem Tag-Namen übereinstimmen

Die anfängliche Implementierungsmethode verwendet Komponentenrekursion Zeigt den Namen der aktuellen Ebene an und rendert sie, übergibt alle Objekte in den untergeordneten Ebenen an sich selbst und führt dann den gleichen Vorgang aus, bis die untergeordneten Elemente keine Daten mehr haben. Es ist erwähnenswert, dass

Wenn v-if hier nicht hinzugefügt wird, wird es zu einer Endlosschleife und wird weiterhin ausgeführt. Daher müssen wir feststellen, ob das aktuell ausgeführte Objekt noch am Leben ist Nächstes Level?

Meine Daten wurden hier leicht geändert, daher waren die ersten Daten, die ich übergeben habe, (index.html-Seite)

Dann habe ich ein Ereignis definiert, um das Schließen und Öffnen jeder Ebene zu verwalten. Ich habe ein Popup-Fenster verwendet, um zu überprüfen, ob der Wert von Isopen geändert wurde

Sehen wir uns die Ergebnisse an

Wenn Sie die Seite zum ersten Mal betreten, ist das Undefinierte in den Klammern der aktuelle Wert von Isopen, da er nicht definiert ist Diesmal ist es undefiniert

Dann habe ich auf A geklickt

Weil isopen zu diesem Zeitpunkt invertiert wurde, also isopen ist derzeit wahr

Aber die Seite hat sich immer noch nicht geändert, ganz zu schweigen von der Erweiterungsfunktion, auch undefiniert hat sich nicht geändert

Nach einigem Baidu stellt sich heraus, dass Vue selbst keine direkten Änderungen an den von Props empfangenen Werten mehr zulässt

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Ausführliche Erläuterung allgemeiner Hinzufügungs-, Lösch-, Änderungs- und Abfragevorgänge von JS-DOM-Elementen

Ausführlich Erläuterung der Anwendungsfälle der JS-Rückruffunktion

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zum Implementieren von Baumansichtsdaten in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Zusammenfassung der DOM-Baum-Traversalmethoden für JS-OperationenNächster Artikel：Zusammenfassung der DOM-Baum-Traversalmethoden für JS-Operationen

In Verbindung stehende Artikel

Mehr sehen