Comment utiliser vue.js et element-ui pour implémenter l'arborescence des menus

Cette fois, je vais vous montrer comment utiliser vue.js et element-ui pour implémenter l'arborescence des menus. Quelles sont les précautions pour utiliser vue.js et element-ui pour implémenter l'arborescence des menus. structure ? Voici ce qui suit : C'est un cas pratique, jetons-y un coup d'œil.

Scénario : Selon les besoins de l'entreprise, il est nécessaire d'implémenter un menu arborescent actif. Les données du menu sont renvoyées depuis l'arrière-plan. Le rendu final est le suivant :

Renvoyé par l'arrière-plan Le format des données est le suivant :

data=[{
 pID:'1',//父ID
 name:'目录一',
menuID:'m1',//本身ID
　　　　　　　　　　　　　　isContent:false//判断是否是目录
},
 {
pID:'1',
 name:'目录二',
menuID:'m2',
　　　　　　　　　　　　　　isContent:false
 },
 {
 pID:'m1',
 name:'目录一--菜单一',
menuID:'m11',
　　　　　　　　　　　　　　isContent:true
 },
 {
 pID:'m1',
 name:'目录一--目录一',
menuID:'m12',
　　　　　　　　　　　　　　isContent:false
 },
　　　　　　　　　　　{
　　　　　　　　　　　　pID:'m12',
 name:'目录一--目录一--菜单一',
menuID:'m121',
　　　　　　　　　　　　 isContent:true
 },
 {
 pID:'m2',
 name:'目录二--菜单一',
menuID:'m21',
　　　　　　　　　　　　　　isContent:true
 },
 {
 pID:'m2',
 name:'目录二--菜单二',
menuID:'m22',
　　　　　　　　　　　　　　isContent:true
 },
 ]

Il s'agit d'une chaîne de données avec une relation parent-enfant. La première étape consiste à convertir cette grande chaîne de données en une. structure arborescente :

tree(){
        let data=[{
              pID:'1',//父ID
              name:'目录一',
              menuID:'m1',//本身ID
  　　　　　　　　　　　　　　isContent:false//判断是否是目录
            },
            {
              pID:'1',
              name:'目录二',
              menuID:'m2',
  　　　　　　　　　　　　　　isContent:false
            },
            {
              pID:'m1',
              name:'目录一--菜单一',
              menuID:'m11',
  　　　　　　　　　　　　　　isContent:true
            },
            {
              pID:'m1',
              name:'目录一--目录一',
              menuID:'m12',
  　　　　　　　　　　　　　　isContent:false
            },
  　　　　　　　　　　　{
    　　　　　　　　　　　　pID:'m12',
              name:'目录一--目录一--菜单一',
              menuID:'m121',
  　　　　　　　　　　　　 isContent:true
            },
            {
              pID:'m2',
              name:'目录二--菜单一',
              menuID:'m21',
  　　　　　　　　　　　　　　isContent:true
            },
            {
              pID:'m2',
              name:'目录二--菜单二',
              menuID:'m22',
  　　　　　　　　　　　　　　isContent:true
            },
          ]
        let tree = []
        for(let i=0;i<data.length;i++){
          if(data[i].pID == &#39;1&#39;){
            let obj = data[i]
            obj.list = []
            tree.push(obj)
            data.splice(i,1)
            i--
          }
        }
        menuList(tree)
        console.log(tree)
        function menuList(arr){
          if(data.length !=0){
            for(let i=0; i<arr.length;i++){
              for(let j=0;j<data.length;j++){
                if(data[j].pID == arr[i].menuID){
                  let obj = data[j]
                  obj.list = []
                  arr[i].list.push(obj)
                  data.splice(j,1)
                  j--
                }
              }
              menuList(arr[i].list)
            }
          }
        }
      }

Exécuter La structure renvoyée une fois terminé est la suivante :

[{"pID":"1","name":"目录一","menuID":"m1","isContent":false,"list":[{"pID":"m1","name":"目录一--菜单一","menuID":"m11","isContent":true,"list":[]},{"pID":"m1","name":"目录一--目录一","menuID":"m12","isContent":false,"list":[{"pID":"m12","name":"目录一--目录一--菜单一","menuID":"m121","isContent":true,"list":[]}]}]},{"pID":"1","name":"目录二","menuID":"m2","isContent":false,"list":[{"pID":"m2","name":"目录二--菜单一","menuID":"m21","isContent":true,"list":[]},{"pID":"m2","name":"目录二--菜单二","menuID":"m22","isContent":true,"list":[]}]}]

Ensuite, nous montrerons le composant de menu

Navigation d'element-ui utilisé dans le projet, afin d'obtenir une telle arborescence, traitez chaque niveau de menu comme un composant distinct, et récursivement en jugeant la valeur de isContent. J'ai posté le code directement

<el-menu 
      theme="dark"
      :default-active="openMenuID"
      :default-openeds="openMenuArr"
      class="el-menu"
     @select="handleSelect">
      <template v-for="(item,index) in menuList">
         <el-submenu :index=item.menuID v-if="item.IsContent">
           <template slot="title">
          <i class="el-icon-menu"></i>
             {{item.name}}
           </template>
           <tree-menu :data="item.list"></tree-menu>
         </el-submenu>
         <el-menu-item :index=item.menuID v-else>{{item.name}}</el-menu-item>
      </template>
    </el-menu>

Le code du composant tree-menu :

<template v-for="(menu,index) in data">
      <el-submenu :index=menu.menuID v-if="menu.IsContent">
        <template slot="title">
          <i class="el-icon-plus"></i>
          {{menu.name}}</template>
        <tree-menu :data="menu.list"></tree-menu>
      </el-submenu>
      <el-menu-item v-else :index=menu.menuID>
        {{menu.name}}
      </el-menu-item>
    </template>

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article Pour plus de passionnant. Pour plus d'informations, veuillez faire attention au site Web chinois php Autres articles connexes !

Lecture recommandée :

Comment trouver et utiliser des éléments JQuery

Comment utiliser le module nodeJS

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!