How to implement tree menu component in uniapp

How to implement the tree menu component in uniapp

Introduction:
The tree menu is a common menu structure, usually used to display flat data structures, and with a tree structure form presented to the user. In uniapp, we can use the idea of ​​component development to implement a universal tree menu component, which is convenient for developers to reuse in different projects. This article will introduce how to implement the tree menu component in uniapp and provide relevant code examples.

Implementation steps:
Step 1: Create a tree menu component
First, create a tree menu component in the uniapp project and name it TreeMenu.

1.1 Create a new folder in the components directory and name it TreeMenu.
1.2 Create three files in the TreeMenu directory: TreeMenu.vue (component body), treeMenu.css (component style), index.js (component registration).

Step 2: Write the TreeMenu component
Next, we define the specific content of the tree menu component in the TreeMenu.vue file.

d477f9ce7bf77f53fbcf36bec1b69b7a
8b2e48a3d9011bf639e3fbceadd07fb5

<ul>
  <li v-for="item in data" :key="item.id">
    <div class="tree-menu-item" @click="toggleChildren(item)">
      <span>{{ item.name }}</span>
      <i class="icon" :class="{ 'icon-open': item.open }"></i>
    </div>
    <ul v-if="item.children && item.open">
      <tree-menu :data="item.children"></tree-menu>
    </ul>
  </li>
</ul>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
props: {

data: {
  type: Array,
  default: () => []
}

},
methods: {

toggleChildren(item) {
  item.open = !item.open;
}

}
}
3fa3f474cbb4b6d948eebecb1be5dde4

30e8033e360bcffb1ce9b4703e10b64c
.tree-menu {
margin: 0;
padding: 0;
}

.tree-menu- item {
padding-left: 20px;
cursor: pointer;
}

.icon {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 5px;
background-color: #000;
}
.icon-open {
background-color: #f00;
}
531ac245ce3e4fe3d50054a55f265927

Step 3: Register the TreeMenu component
In the index.js file, register the TreeMenu component as a global component.

import Vue from 'vue'
import TreeMenu from './TreeMenu.vue'

Vue.component('TreeMenu', TreeMenu)

Step 4: Using the TreeMenu component
Finally, introduce the TreeMenu component where you need to use the tree menu and pass in the corresponding data.

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<tree-menu :data="menuData"></tree-menu>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
data() {

return {
  menuData: [
    {
      id: 1,
      name: '菜单1',
      children: [
        {
          id: 2,
          name: '菜单1-1',
          children: [
            {
              id: 3,
              name: '菜单1-1-1'
            },
            {
              id: 4,
              name: '菜单1-1-2'
            }
          ]
        },
        {
          id: 5,
          name: '菜单1-2'
        }
      ]
    },
    {
      id: 6,
      name: '菜单2'
    }
  ]
}

}
}
2cacc6d41bbb37262a98f745aa00fbf0

Summary:
Through the above steps, we can Implement a simple tree menu component. First, we created a component named TreeMenu, and then defined the structure and interaction logic of the tree menu in this component. Next, we register the TreeMenu component as a global component so that it can be used anywhere in the project. Finally, introduce the TreeMenu component into the page that needs to use the tree menu, and display the menu content by passing in data. Through the above sample code, we can customize the tree menu component according to our own needs and flexibly apply it in uniapp.

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