Comment implémenter l'arborescence JSON à l'aide de Vue2.x

Cet article vous présente principalement les informations pertinentes sur l'utilisation de Vue2>

PréfaceJ'ai récemment rencontré une exigence au travail puisque le projet a besoin d'une fonction. pour analyser les chaînes JSON et générer un arbre JSON, je n'en ai pas trouvé de approprié sur le composant GitHub, j'ai donc écrit un composant d'arbre JSON basé sur Vue2.X ​​Le principe principal est d'utiliser le composant récursif de Vue pour effectuer une analyse en profondeur. première traversée de précommande. Ce composant peut non seulement convertir une chaîne JSON illisible en une structure arborescente lisible, mais peut également être utilisé pour capturer les données d'un certain sous-arbre. Le composant

Code source Github
Github-Page
peut être utilisé de manière récursive dans son modèle Appelez-vous. Cependant, cela ne peut être fait que s'il dispose de l'option de nom

Fonction d'embellissement des données de chaîne :

Hiérarchique spécifique fonction de capture de données :

Transmettez les données du père via les données parent et transmettez les données de l'enfant via les données lorsque les données du sous-arbre sont Pour. types simples, la récursion n'est plus saisie. Dans le même temps, le composant fournit un événement de clic pour obtenir les données de l'arborescence d'un nœud spécifique, et les données de l'enfant sont continuellement transmises au niveau suivant via le mécanisme récursif, similaire au " mécanisme à bulles".

<tree
 :parent-data="data"
 :data="item"
 :path="path + (Array.isArray(data) ? `[${index}]` : `.${index}`)"
 :path-checked="pathChecked"
 :path-selectable="pathSelectable"
 :selectable-type="selectableType"
 :index="index"
 :child="true"
 @click="handleItemClick">
</tree>

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment utiliser ueditor dans vue

Comment implémenter un menu de tiroir inférieur de contrôle personnalisé à l'aide de React Native

Utilisez ref dans vue pour laisser le composant parent appeler le composant enfant

Comment implémenter l'exe de génération de pages Web frontales

Comment implémenter des requêtes inter-domaines ajax front-end et back-end

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!