How to realize infinite multi-level classification of menu bar by vue+el-menu

This article mainly introduces vue+el-menu how to achieve unlimited multi-level classification of the menu bar, with a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

The details are as follows

Idea: the data format must be a multi-layer nesting mode within the array, and the recursive rendering menu bar data is used to realize menu multi-level classification.

1. Simulate menu data and introduce encapsulation components

Header Main import MenuTree from'.. / components/MentTree'export default {components: {MenuTree}, data () {return {menuList: [{index: '1percent, icon:' el-icon-menu' Name: 'first level menu 01menu, children: [{index:' 1-1menu, icon: 'el-icon-film', name:' second-level menu 01menu, children: [{index:'1-1-1'' Icon: 'el-icon-date', name:' three-level menu 01menu, children: [{index:'1-1-1-1-1, icon: 'el-icon-monitor' Name: 'level 4 menu 01'}]}, {index:' 1-1-2, icon: 'el-icon-headset' Name: 'level 3 menu 02'}}, {index:' 1-2 menu, icon: 'el-icon-data-line', name: level 2 menu 02'}]} {index: '2menu, icon:' el-icon-s-data', name: 'level I menu 02'}, {index:' 3menu, icon: 'el-icon-s-operation', name:' level I menu 03'}, {index:'4' Icon: 'el-icon-user', name:' first-level menu 04'}]}, mounted () {}, methods: {}}

Recursive rendering of menu bar within 2.MenuTree component

{{menu.name}} {{menu.name}} export default {props: ['menuData'], name:' MenuTree'}

3. Complete the effect display

Thank you for reading this article carefully. I hope the article "how to achieve unlimited levels of classification in the menu bar by vue+el-menu" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!