집 > 기사 > 웹 프론트엔드 > Vue.js 재귀 구성 요소는 트리 메뉴를 구현합니다.

Vue.js 재귀 구성 요소는 트리 메뉴를 구현합니다.

不言원래의: 2018-06-29 16:30:551371검색

이 글에서는 주로 Vue.js의 재귀 구성 요소를 사용하여 기본 트리 메뉴를 구현하는 방법을 소개합니다. 참고값이 너무 좋은데 같이 살펴볼까요

최근 Vue.js의 재귀 컴포넌트를 살펴보고 기본 트리 메뉴를 구현했습니다.

프로젝트 구조:

main.js 입구는 매우 간단합니다: #🎜🎜 ##🎜 🎜#

import Vue from &#39;vue&#39;
Vue.config.debug = true
import main from &#39;./components/main.vue&#39;
new Vue({
 el: &#39;#app&#39;,
 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.js 재귀 구성 요소는 트리 메뉴를 구현합니다.

관련 기사