Le composant récursif Vue.js implémente le menu arborescent

Cet article présente principalement l'utilisation de composants récursifs de Vue.js pour implémenter un menu arborescent de base. Il a une très bonne valeur de référence, examinons-le ensemble

J'ai récemment examiné le composant récursif de Vue.js et implémenté un menu arborescent de base.

Structure du projet :

main.js Comme entrée, c'est très simple :

import Vue from 'vue'
Vue.config.debug = true
import main from './components/main.vue'
new Vue({
 el: '#app',
 render: h => h(main)
})

Il introduit un composant main.vue :

<template>
 <p class="tree-menu">
 <ul v-for="menuItem in theModel">
 <my-tree :model="menuItem"></my-tree>
 </ul>
 </p>
</template>
<script>
var myData = [
 {
 &#39;id&#39;: &#39;1&#39;,
 &#39;menuName&#39;: &#39;基础管理&#39;,
 &#39;menuCode&#39;: &#39;10&#39;,
 &#39;children&#39;: [
 {
 &#39;menuName&#39;: &#39;用户管理&#39;,
 &#39;menuCode&#39;: &#39;11&#39;
 },
 {
 &#39;menuName&#39;: &#39;角色管理&#39;,
 &#39;menuCode&#39;: &#39;12&#39;,
 &#39;children&#39;: [
 {
 &#39;menuName&#39;: &#39;管理员&#39;,
 &#39;menuCode&#39;: &#39;121&#39;
 },
 {
 &#39;menuName&#39;: &#39;CEO&#39;,
 &#39;menuCode&#39;: &#39;122&#39;
 },
 {
 &#39;menuName&#39;: &#39;CFO&#39;,
 &#39;menuCode&#39;: &#39;123&#39;
 },
 {
 &#39;menuName&#39;: &#39;COO&#39;,
 &#39;menuCode&#39;: &#39;124&#39;
 },
 {
 &#39;menuName&#39;: &#39;普通人&#39;,
 &#39;menuCode&#39;: &#39;124&#39;
 }
 ]
 },
 {
 &#39;menuName&#39;: &#39;权限管理&#39;,
 &#39;menuCode&#39;: &#39;13&#39;
 }
 ]
 },
 {
 &#39;id&#39;: &#39;2&#39;,
 &#39;menuName&#39;: &#39;商品管理&#39;,
 &#39;menuCode&#39;: &#39;&#39;
 },
 {
 &#39;id&#39;: &#39;3&#39;,
 &#39;menuName&#39;: &#39;订单管理&#39;,
 &#39;menuCode&#39;: &#39;30&#39;,
 &#39;children&#39;: [
 {
 &#39;menuName&#39;: &#39;订单列表&#39;,
 &#39;menuCode&#39;: &#39;31&#39;
 },
 {
 &#39;menuName&#39;: &#39;退货列表&#39;,
 &#39;menuCode&#39;: &#39;32&#39;,
 &#39;children&#39;: []
 }
 ]
 },
 {
 &#39;id&#39;: &#39;4&#39;,
 &#39;menuName&#39;: &#39;商家管理&#39;,
 &#39;menuCode&#39;: &#39;&#39;,
 &#39;children&#39;: []
 }
];
import myTree from &#39;./common/treeMenu.vue&#39;
export default {
 components: {
 myTree
 },
 data() {
 return {
 theModel: myData
 }
 }
}
</script>

Ce fichier introduit un composant arborescent treeMenu.vue :

<template>
 <li>
 <span @click="toggle">
 <i v-if="isFolder" class="icon" :class="[open ? &#39;folder-open&#39;: &#39;folder&#39;]"></i>
 <i v-if="!isFolder" class="icon file-text"></i>
 {{ model.menuName }}
 </span>
 <ul v-show="open" v-if="isFolder">
 <tree-menu v-for="item in model.children" :model="item"></tree-menu>
 </ul>
 </li>
</template>
 <script>
export default {
 name: &#39;treeMenu&#39;,
 props: [&#39;model&#39;],
 data() {
 return {
 open: false,
 isFolder: true
 }
 },
 computed: {
 isFolder: function() {
 return this.model.children && this.model.children.length
 }
 },
 methods: {
 toggle: function() {
 if (this.isFolder) {
 this.open = !this.open
 }
 }
 }
}
</script>
 <style>
ul {
 list-style: none;
}
i.icon {
 display: inline-block;
 width: 15px;
 height: 15px;
 background-repeat: no-repeat;
 vertical-align: middle;
}
.icon.folder {
 background-image: url(/src/assets/folder.png);
}
.icon.folder-open {
 background-image: url(/src/assets/folder-open.png);
}
.icon.file-text {
 background-image: url(/src/assets/file-text.png);
}
.tree-menu li {
 line-height: 1.5;
}
</style>

C'est c'est simple. Il n’y a vraiment rien à écrire dans cet article, gardons-le simplement comme trace.

L'effet de capture d'écran est le suivant :

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour en savoir plus. contenu associé, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Analyse sur la séparation et la combinaison de vue-admin et backend (flask)

Basée sur le framework Vue Introduction à la fonction d'actualisation pull-up de la bibliothèque de composants vux

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!