How to implement recursive tree menu component in vuejs (detailed tutorial)-JS Tutorial-php.cn

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

亚连

Release： 2018-06-12 10:42:19

Original

1810 people have browsed it

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

Copy after login

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>

Copy after login

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: &#39;treeMenu&#39;,
  //props: [&#39;model&#39;], //这样和下面效果一样
  props: {
   model: { type: Object },
  },
  components: {},
}

Copy after login

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  //这个不要写死，运用计算属性计算看存不存在
   }
  },

Copy after login

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

Copy after login

Show hidden events

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

Copy after login

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.

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

How to implement the lottery system using JavaScript

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!