Heim >Web-Frontend >js-Tutorial >Vue implementiert die Datenfunktion zur Baumansicht

Vue implementiert die Datenfunktion zur Baumansicht

不言Original: 2018-05-07 14:33:541686Durchsuche

Dieser Artikel stellt hauptsächlich die Implementierung der Baumansichtsdatenfunktion vor. Jetzt kann ich ihn mit Ihnen teilen.

Verwenden Sie einen einfachen Baum Ansicht zum Implementieren, vertraut mit der rekursiven Verwendung von Komponenten

Dies sind die simulierten Baumdiagrammdaten

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

Die 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:&#39;tree&#39;, 
 props:[&#39;treelist&#39;], 
 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:&#39;all&#39;, 
  children:{ 
   A:{ 
    name:&#39;A&#39;, 
    children:{ 
     a1:{ 
      name:&#39;a1&#39;, 
      children:{ 
       a11:{  
        name:&#39;a11&#39;, 
        children:null 
       }, 
       a12:{  
        name:&#39;a12&#39;, 
        children:null 
       } 
      } 
     }, 
     a2:{ 
      name:&#39;a2&#39;, 
      children:{ 
       b21:{  
        name:&#39;b21&#39;, 
        children:null 
       } 
      } 
     } 
    } 
   }, 
   B:{ 
    name:&#39;B&#39;, 
    children:{ 
     b1:{ 
      name:&#39;b1&#39;, 
      children:{ 
       b11:{  
        name:&#39;b11&#39;, 
        children:null 
       }, 
       b12:{  
        name:&#39;b12&#39;, 
        children:null 
       } 
      } 
     }, 
     b2:{ 
      name:&#39;b2&#39;, 
      children:{ 
       b21:{  
        name:&#39;b21&#39;, 
        children:null 
       } 
      } 
     } 
    } 
   } 
  } 
 } 
const app=new Vue({ 
 el:"#app", 
 components:{ 
  'tree':tree 
 }, 
 data:{ 
  treeList:all 
 } 
})

Nachdem ich die Fallstricke durchgesehen hatte, stellte ich fest, dass es einen ähnlichen Fall auf der offiziellen Website von Vue gibt, Link → Portal

Verweisen Sie auf die Methode auf der offiziellen Website. Schließlich habe ich versucht, sie umzusetzen

Der Unterschied zwischen dem Schreiben auf diese Weise und meiner Idee, als ich in die Falle trat, besteht darin, dass eine solche Komponente nur vorhanden ist Verantwortlich für ein Objekt, die Objekte in jedem Kind durchlaufen und die Komponenten einzeln verarbeiten, und mein erster Versuch bestand darin, die gesamten Kinder in sich selbst zu übergeben (Der Fehlerfall von (Bei Interesse schauen Sie sich bitte den ersten Versuch unten an.)

Solche Komponentenhandles. Welche Vorteile hat das Schreiben eines Objekts?

Ich kann den Schalter innerhalb der Komponente anpassen

Ich habe die Variable open in data definiert. Da die Komponente rekursiv ist, ist sie gleichbedeutend damit, dass jede Komponente ein eigenes open hat.

Dann Warum kann ich diese Methode nicht verwenden, wenn ich zum ersten Mal eine Grube betrete? Eine Komponente, die mehrere Objekte verarbeitet, entspricht einem Schalter, der alle Objekte in untergeordneten Objekten steuert alle Objekte derselben Ebene sollen erweitert werden

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

definiert ein berechnetes Attribut, das verwendet wird, 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

Das Folgende sind die Fallstricke, auf die ich gestoßen bin, als ich anfing, es zu versuchen

Notieren Sie sie hier, um einen Eindruck zu hinterlassen, wenn Sie in Zukunft auf ähnliche Probleme stoßen.

Ich bin auf einen solchen Fehler gestoßen, als ich zum ersten Mal darauf stieß

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. Wenn ich sie verwende, muss ich den Namen eingeben und ihn konsistent machen mit dem Tag-Namen

Die anfängliche Implementierungsmethode verwendet Komponentenrekursion, um den Namen der aktuellen Ebene anzuzeigen und sie und alle Objekte zu rendern in den Kindern Geben Sie es an sich selbst weiter und führen Sie dann den gleichen Vorgang aus, bis die Kinder keine Daten mehr haben. Es ist erwähnenswert, dass

, wenn v-if wird hier nicht hinzugefügt Es wird zu einer Endlosschleife und wird weiterhin ausgeführt, daher müssen wir feststellen, ob das aktuell ausgeführte Objekt eine nächste Ebene hat

Meine Daten wurden Hier etwas 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 verwende das Popup-Fenster, um zu überprüfen, ob der Wert von Isopen geändert wurde

Sehen wir uns das Ergebnis an

Wann Wir geben zuerst die Seite ein, undefiniert in Klammern. Dies ist der aktuelle Wert von Isopen, da er zu diesem Zeitpunkt nicht definiert ist, also undefiniert ist

Dann Ich habe auf A geklickt

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

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

Nach etwas Baidu habe ich festgestellt, dass Vue selbst keine direkten Änderungen an den von Props akzeptierten Werten mehr zulässt

Nach Vue2.0 können untergeordnete Komponenten den Wert des nicht mehr ändern übergeordnete Komponente, nur auf Änderungen reagieren über untergeordnete Komponente $emit(), übergeordnete Komponente $on()

Verwandte Empfehlungen:

Vue implementiert die Dynamics Refresh Echarts-Komponente

Das obige ist der detaillierte Inhalt vonVue implementiert die Datenfunktion zur Baumansicht. 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：Verwendung der VUE-Region-Selektor-Komponente (V-Distpicker).Nächster Artikel：Verwendung der VUE-Region-Selektor-Komponente (V-Distpicker).

In Verbindung stehende Artikel

Mehr sehen