Vuejs utilise des composants récursifs pour implémenter des répertoires arborescents-js tutoriel-php.cn

Vuejs utilise des composants récursifs pour implémenter des répertoires arborescents

小云云

Libérer： 2018-01-27 14:30:08

original

2858 Les gens l'ont consulté

Cet article présente principalement la méthode d'utilisation de composants récursifs pour implémenter des répertoires arborescents dans vuejs. L'éditeur pense que c'est plutôt bon. Maintenant, je vais le partager avec vous et vous donner une référence, j'espère que cela pourra vous aider.

Tout d'abord, l'effet est le suivant. Je pense que le menu est plutôt sympa, non ? La structure de Java implique la connaissance de la construction de multi-arbres. J'écrirai un autre article pour l'expliquer en détail plus tard. Ici, je vais parler du front-end.

Les données peuvent d'abord être construites au format json. Le format utilisé ici est à peu près le suivant, en utilisant childList pour imbriquer le sous-menu :

Selon à l'idée, nous voulons li à l'intérieur de ul, et ul à l'intérieur de li, pour qu'il puisse être appliqué à l'infini, nous écrivons donc ceci dans le sous-composant :

{
  id：YH, 
  name：银行, 
  pid：0, 
  childList：[{
    id:YH******, 
    name:国家开发银行, 
    pid:YH, 
    childList:[{
      id:YH*****3, 
      name:国家开发银行香港分行, 
      pid:YH******, 
      childList:[]
    }, 
    {
      id=YH*****1, 
      name=国家开发银行广东省分行, 
      pid=YH******, 
      childList=[]
    }, {
      id=YH*****2, 
      name=国家开发银行深圳分行, 
      pid=YH******, 
      childList=[]
    }
  ]}
}

Copier après la connexion

Le le nom est souligné dans l'attribut du document officiel, nous devons donc définir le nom au début. Le nom ici utilise le menu arborescent ci-dessus :

 <li>
  <p>
   <i @click=&#39;toggle&#39; v-if=&#39;isFolder&#39; class="mui-icon iconfont" :class="[open?&#39;icon-wenjianjia&#39;:&#39;icon-wenjianjiaguanbi&#39;]"></i>
   <!--isFolder判断是否存在子级改变图标-->
   <i @click=&#39;toggle&#39; class="mui-icon iconfont icon-wenjian" style="color: #00ccff" v-else></i>
   <!--这里用到的方法是给父组件传值，具体可看上一篇文章-->
   <span @click="propInstCode(model);propInstName(model)">
    {{model.name}}
   </span>
  </p>
  <ul v-show="open" v-if=&#39;isFolder&#39;>
   <tree-menu v-for=&#39;cel in model.childList&#39; :model=&#39;cel&#39;></tree-menu>
  </ul>
 </li>

Copier après la connexion

Selon le. idée de vue, pas d'opération Dans l'arborescence Dom, on définit deux variables, une pour afficher et masquer le sous-menu (open), et une pour modifier l'icône du sous-menu (isFolder).

export default {
  name: &#39;treeMenu&#39;,
  props: [&#39;model&#39;],
  components: {}
}

Copier après la connexion

Je l'ai écrit sur la base d'un article. Ce que j'ai dit à cette étape est "Utilisez les propriétés calculées de vue pour changer dynamiquement la valeur d'isFolder, modifiez l'icône, et déterminez s'il existe ou non. Sous-niveau et longueur du sous-niveau"

data() {
   return {
    open: false,
    isFolder: true,
   }
 },

Copier après la connexion

Il y a un problème ici, et l'erreur continuera à être signalée :

computed: {
  isFolder() {
    return this.model.childTreeNode && this.model.childTreeNode.length
  }
}

Copier après la connexion

Je cherchais un problème depuis longtemps, et finalement je l'ai résolu comme ça Supprimez l'attribut calculé de calculé et mettez-le dans créé :

Afficher/Masquer les événements

created(){
   //将isFolder放在这里判断可以识别出最底层菜单，然后改变图标，放在computed的话会一直报错并识别不出最底层菜单改变样式
   this.isFolder = this.model.childList && this.model.childList.length;
  }

Copier après la connexion

Le composant du répertoire arborescent a été construit ici. Il suffit de l'appeler dans le composant parent correspondant. . Le code complet est le suivant :

Référence

methods: {
   toggle: function() {
    if(this.isFolder){
     this.open = !this.open;
    }
   },
}

Copier après la connexion

sous-composant dans le composant parent :

<. 🎜>

<ul class="tree_container" v-for="item in list">
  <my-menu-tree :model=&#39;item&#39; :instType=&#39;this.instType&#39;></my-menu-tree>
</ul>

Copier après la connexion

Le sous-composant peut être utilisé directement, les styles sont également affichés ensemble, mais il y a aussi certains styles dans le composant parent, que vous pouvez opérer par vous-même. Ce code complet comprend également le. partie de transfert de valeur des composants mentionnée dans l'article précédent.

Mon icône utilise la police d'icônes d'Alibaba, vous pouvez également la rechercher sur Baidu.

Recommandations associées :

Copier après la connexion

Exemple de répertoire d'arborescence implémenté par jquery_jquery

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!