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中文網其他相關文章！