// 子組件代碼
<template>
? ? <li>
? ? ? ? <span @click="toggle(model)"> {{ isFolder? "<" + model.menuName : model.menuName ? }}</span>
? ? ? ? <ul v-if="isFolder" v-show="open" style="position: absolute;left: -120px;top: 0px; width:100px; background-color: cadetblue;">
? ? ? ? ? ? <menuItems v-for="(item, index) in model.childTree" :model="item" :key="index"></menuItems>
? ? ? ? </ul>
? ? </li>
</template>
?
<script type="text/javascript">
? ? export default {
? ? ? ? // 組件遞歸必要條件，name屬性,然后在標簽就可以通過name直接使用自己
? ? ? ? name: 'menuItems',
? ? ? ? props: ['model',],
? ? ? ? data() {
? ? ? ? ? ? return {
?? ??? ??? ??? ? // 控制子列表的顯示隱藏
?? ??? ??? ??? ?open: false
?? ??? ??? ?}
? ? ? ? },
? ? ? ? computed: {
? ? ? ? ? ? // 是否還有子列表需要渲染，作為v-if的判斷條件
? ? ? ? ? ? isFolder() {
? ? ? ? ? ? ? ? return this.model.childTree && this.model.childTree.length
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? methods: {
? ? ? ? ? ? // 切換列表顯示隱藏的方法
? ? ? ? ? ? toggle(mode) {
?? ??? ??? ??? ?
? ? ? ? ? ? ? ? if(this.isFolder) {
? ? ? ? ? ? ? ? ? ? this.open = !this.open
? ? ? ? ? ? ? ? }
?? ?/* ?? ??? ??? ?if(mode.id != undefined && this.open){
?? ??? ??? ??? ??? ?this.open = false;
?? ??? ??? ??? ?} */
? ? ? ? ? ? },
? ? ? ? }
? ? }
</script>
<style scoped>
?? ?ul,li {
?? ??? ?list-style: none;
?? ?}
</style>

<template>
?? ?<!--http://chabaoo.cn/css/378895.html-->
?? ?<view>
?? ??? ?<div style="position: absolute;left:400px;">
?? ??? ??? ?<ul>
?? ??? ??? ??? ?<menu-item v-for="(model, index) in list" :model="model" :key="index"></menu-item>
?? ??? ??? ?</ul>
?? ??? ?</div>
?? ?</view>
?? ?
</template>
?
<script>
?? ?import MenuItem from "../../components/MenuItem.vue"
?? ?export default {
?? ??? ?components:{
?? ??? ??? ?MenuItem
?? ??? ?},
?? ??? ?computed:{
?? ??? ??? ?
?? ??? ?},
?? ??? ?data() {
?? ??? ??? ?return {
?? ??? ??? ??? ?list: [ // 將菜單數(shù)據傳到菜單組件中就行了
?? ??? ??? ??? ?{
?? ??? ??? ??? ? ? ?"id": "1",
?? ??? ??? ??? ? ? ?"menuName": "菜單1",
?? ??? ??? ??? ? ? ?"childTree": [{
?? ??? ??? ??? ? ? ? ? ?"menuName": "項目進度",
?? ??? ??? ??? ? ? ? ? ?"childTree": [{
?? ??? ??? ??? ? ? ? ? ? ? ?"menuName": "項目一",
?? ??? ??? ??? ? ? ? ? ? ? ?"childTree": [{ "menuName": "詳細信息" }]
?? ??? ??? ??? ? ? ? ? ?}]
?? ??? ??? ??? ? ? ?}, {
?? ??? ??? ??? ? ? ? ? ?"menuName": "任務安排"
?? ??? ??? ??? ? ? ?}]
?? ??? ??? ??? ?},?
?? ??? ??? ??? ?{
?? ??? ??? ??? ? ? ?"id": "2",
?? ??? ??? ??? ? ? ?"menuName": "菜單2"
?? ??? ??? ??? ?},?
?? ??? ??? ??? ?{
?? ??? ??? ??? ? ? ?"id": "3",
?? ??? ??? ??? ? ? ?"menuName": "菜單3"
?? ??? ??? ??? ?}]
?? ??? ??? ?};
?? ??? ?},
?? ??? ?methods:{
?? ??? ?}
?? ?}
</script>
?
<style>?? ?
?? ?ul,li{
?? ?list-style: none !important;
? ? ?}
</style>