Solution to realize menu tree structure with vue.js and element-ui

This article introduces vue.js and element-ui to implement the menu tree structure through examples. It is very good and has reference value. Friends in need can refer to it

Due to business needs, it is required to implement the tree menu, and the menu data is returned from the background. I found a few articles on the Internet and finally found a solution.

Scenario: According to business requirements, it is necessary to implement an active tree menu. The menu data is returned from the background. The final rendering is as follows:

Returned from the background The data format is like this:

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

This is a string of data with a parent-child relationship. The first step is to convert this large string of data into a tree structure:

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

The structure returned after running is like this:

[{"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":[]}]}]

Next It will be shown that the navigation menu component of element-ui used in the project. In order to achieve such a tree structure, each level of the menu is used as a separate component and recursively by judging the value of isContent. I directly post the code

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

The code of the tree-menu component:

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

Related recommendations:

jQuery vue.js implements nine-square grid puzzle

The above is the detailed content of Solution to realize menu tree structure with vue.js and element-ui. For more information, please follow other related articles on the PHP Chinese website!