How to implement recursive tree menu component in vuejs (detailed tutorial)

This article mainly introduces the implementation of recursive tree menu components in vuejs. Now I will share it with you and give you a reference.

Preface

Some time ago, I used vue to build a backend management system, in which recursive components were used the most, and because of my unfamiliarity with the official documents, I stepped on it. I encountered a lot of pitfalls, so I wrote them down and shared them with everyone today.

Recursive components

A component can call itself recursively within its template, only if it has the name option. This sentence on the official website is that the key definition component must have a name attribute.

The simulation data format is as follows:

[
  {
   "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 Our idea is to set li in ul, unlimited ul sets li, and the title is wrapped with p element,

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

written in the official document Recursive components emphasize the use of the name attribute

It should be noted that the data passed from the parent component must be deep copied first

Deep copy: Assign props to data, while assigning values Make a deep copy, JSON.parse(JSON.stringify(this value is enough)) in the data, name the data value yourself

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

According to the idea of ​​​​vue, without operating the Dom tree, we define two variables, one for display Hide the submenu (open), and modify the icon to save the submenu (isFolder).

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

Use vue calculation properties to dynamically change the value of isFolder, modify the icon, and determine whether there are children and the length of the children

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

Show hidden events

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

We have written here I have finished making a tree menu

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed answer: What impact do changes in vue have on components?

How to implement the lottery system using JavaScript

Issues related to value-passing in layui

How to build helloWorld using vue-cli in vue

How to package using Parcel

The above is the detailed content of How to implement recursive tree menu component in vuejs (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!