So implementieren Sie eine rekursive Baummenükomponente in VueJS (ausführliches Tutorial)

Dieser Artikel stellt hauptsächlich die Implementierung der rekursiven Baummenükomponente in vuejs vor. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

Vorwort

Vor einiger Zeit habe ich Vue verwendet, um ein Backend-Managementsystem zu erstellen, in dem rekursive Komponenten am häufigsten verwendet wurden, und weil ich mit dem Beamten nicht vertraut war Ich bin darauf gestoßen und bin auf viele Fallstricke gestoßen, also habe ich sie aufgeschrieben und heute mit allen geteilt.

Rekursive Komponenten

Eine Komponente kann sich innerhalb ihrer Vorlage nur dann rekursiv aufrufen, wenn sie über die Namensoption verfügt. Dieser Satz auf der offiziellen Website besagt, dass die Schlüsseldefinitionskomponente ein Namensattribut haben muss.

Das Simulationsdatenformat ist wie folgt:

[
  {
   "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 Unsere Idee ist, li in ul zu setzen, unendlich ul setzt li und der Titel wird mit einem p-Element umschlossen,

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

Im offiziellen Dokument geschrieben. Rekursive Komponenten betonen die Verwendung des Namensattributs

Es ist zu beachten, dass die von der übergeordneten Komponente übergebenen Daten zuerst tief kopiert werden müssen

Tiefenkopie: Requisiten zuweisen zu den Daten und weisen Sie gleichzeitig Werte zu. Erstellen Sie eine tiefe Kopie, JSON.parse(JSON.stringify(this value is enough)) in den Daten, benennen Sie den Datenwert selbst

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

Laut Idee von vue: Ohne den Dom-Baum zu bedienen, definieren wir zwei Variablen, eine für die Anzeige, das Untermenü ausblenden (öffnen) und das Symbol ändern, um das Untermenü zu speichern (isFolder).

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

Verwenden Sie von Vue berechnete Attribute, um den Wert von isFolder dynamisch zu ändern, das Symbol zu ändern und zu bestimmen, ob untergeordnete Elemente vorhanden sind und wie lang die untergeordneten Elemente sind.

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

Versteckte Ereignisse anzeigen

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

Wir haben hier geschrieben: „Ich habe ein Baummenü erstellt“

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Ausführliche Antwort: Welche Auswirkungen haben Änderungen in Vue auf Komponenten?

So implementieren Sie ein Lotteriesystem mit JavaScript

Probleme im Zusammenhang mit der Wertübergabe in Laui

So erstellen Sie helloWorld mit vue-cli in vue

So verpacken Sie mit Parcel

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine rekursive Baummenükomponente in VueJS (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!