Vue.js 递归组件实现树形菜单

本文主要对介绍利用Vue.js 的递归组件，实现了一个最基本的树形菜单。具有很好的参考价值，下面一起来看下吧

最近看了 Vue.js 的递归组件，实现了一个最基本的树形菜单。

项目结构：

main.js 作为入口，很简单：

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

它引入了一个组件 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>

该文件引入了树形组件 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>

就这么简单。这篇文章还真没什么可写的，权当记录吧。

截图效果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

关于vue-admin和后端(flask)分离结合的解析

基于Vue框架vux组件库实现上拉刷新功能的介绍

以上是Vue.js 递归组件实现树形菜单的详细内容。更多信息请关注PHP中文网其他相关文章！