Comment implémenter le composant de menu arborescent récursif dans vuejs (tutoriel détaillé)

Cet article présente principalement l'implémentation du composant de menu arborescent récursif dans vuejs. Maintenant, je le partage avec vous et le donne comme référence.

Avant-propos

Il y a quelque temps, j'ai utilisé vue pour construire un système de gestion backend, dans lequel les composants récursifs étaient le plus utilisés, et en raison de ma méconnaissance du système officiel documents, j'ai marché dessus. J'ai rencontré beaucoup d'embûches, alors je les ai écrits et partagés avec tout le monde aujourd'hui.

Composants récursifs

Un composant peut s'appeler de manière récursive dans son modèle, uniquement s'il dispose de l'option name. Cette phrase sur le site officiel indique que le composant de définition clé doit avoir un attribut de nom.

Le format des données de simulation est le suivant :

[
  {
   "id": "1",
   "menuName": "基础管理",
   "menuCode": "10",
   "children": [
    {
     "menuName": "用户管理",
     "menuCode": "11"
    },
    {
     "menuName": "角色管理",
     "menuCode": "12",
     "children": [
      {
       "menuName": "管理员",
       "menuCode": "121"
      },
      {
       "menuName": "CEO",
       "menuCode": "122"
      },
      {
       "menuName": "CFO",
       "menuCode": "123"
      },
      {
       "menuName": "COO",
       "menuCode": "124"
      },
      {
       "menuName": "普通人",
       "menuCode": "124"
      }
     ]
    },
    {
     "menuName": "权限管理",
     "menuCode": "13"
    }
   ]
  },
  {
   "id": "2",
   "menuName": "商品管理",
   "menuCode": ""
  },
  {
   "id": "3",
   "menuName": "订单管理",
   "menuCode": "30",
   "children": [
    {
     "menuName": "订单列表",
     "menuCode": "31"
    },
    {
     "menuName": "退货列表",
     "menuCode": "32",
     "children": []
    }
   ]
  },
  {
   "id": "4",
   "menuName": "商家管理",
   "menuCode": "",
   "children": []
  }
 ]

html Notre idée est de définir li dans ul, ul illimité définit li, et le titre est enveloppé avec l'élément p,

<template>
 <li>
  <span @click="toggle">   <!-- toggle:点击关闭展开 -->
   <i v-if="isFolder" class="icon" :class="[open ? &#39;folder-open&#39; : &#39;folder&#39;]" @cilck="toggle"></i>
   <!-- <i v-if="isFolder" class="icon " :class="[open ? &#39;folder-open&#39; : &#39;folder&#39;]"></i> -->
   <i v-if="!isFolder" class="icon folder-text"></i>
   {{model.menuName}}
  </span>
  <ul v-show="open" v-if="isFolder">
   <treeMenu v-for="item in model.children" :model="item"></treeMenu>
  </ul>
 </li>
</template>

Officiel Le composant récursif écrit dans le document met l'accent sur l'utilisation de l'attribut name

Il convient de noter que les données transmises par le composant parent doivent d'abord être copiées en profondeur

Copie approfondie : attribuez des accessoires aux données, faites une copie approfondie tout en attribuant la valeur, JSON.parse(JSON.stringify(this value is suffisant)) dans les données, nommez vous-même la valeur des données

export default {
  name: 'treeMenu',
  //props: ['model'], //这样和下面效果一样
  props: {
   model: { type: Object },
  },
  components: {},
}

Selon l'idée de​​vue, sans utiliser l'arborescence Dom, nous définissons deux variables, une pour afficher et masquer le sous-menu (open), et une pour enregistrer le sous-menu et modifier l'icône (isFolder).

  data() {
   return {
    open: false, //一个显示隐藏子菜单(open)
    //isFolder: true  //这个不要写死，运用计算属性计算看存不存在
   }
  },

Utilisez les propriétés calculées de vue pour changer dynamiquement la valeur d'isFolder, modifier l'icône et déterminer s'il y a des enfants et la longueur des enfants

  computed: {
   isFolder() { //利用vue计算属性动态改变isFolder的值，修改图标，判断存在不子级和子级长度
    // return this.model.children && this.model.children.length //和下面效果一样
    let isFolder = false
    if (this.model.children && this.model.children.length) {
     isFolder = true;
    } else {
     isFolder = false;
    }
    return isFolder
   }
  },

Afficher les événements cachés

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

Afficher les événements cachés

En écrivant ceci, nous avons complété un menu arborescent

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Réponse détaillée : Quel impact les changements de vue ont-ils sur les composants ?

Comment implémenter un système de loterie en utilisant JavaScript

Problèmes liés à la transmission de valeurs dans layui

Comment construire helloWorld en utilisant vue-cli dans vue

Comment empaqueter en utilisant Parcel

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!