uni-app使用vue递归组件做无极树形列表只能显示第一级

根据网上查找的资料,vue做递归组件,模仿着写了一个,遇到个问题,用如下json串,{
"data": {
"OrgName": "项目管理",
"menuCode": "",
},
"childTreeNode": [{
"data": {
"OrgName": "项目",
"menuCode": "BusProject",
},
"childTreeNode": []
},
{
"data": {
"OrgName": "人员周报",
"menuCode": "BusProject",
},
"childTreeNode": []
}
]
}
在递归的组件onload时候添加了日志,执行次数和json串里的个数是吻合的,但是跑起来后,却只有根节点,剩余的子节点都不知道哪里去了,是我书写的问题还是有bug啊。求解惑,搞了一整天了没解决。

2018-11-15 23:23 添加评论 分享
已邀请:
0

1551665485@qq.com - 90后前端

赞同来自:

组件哪来的 看下数据格式对不

0

86300845@qq.com

赞同来自:

同样的问题

0

86300845@qq.com

赞同来自:

折腾一夜了,求解答

0

297008285@qq.com

赞同来自:

同样的问题

0

妖王令剑

赞同来自:

你能把这个组件的代码贴出来吗? 问题很有可能在里面 , 有可能是你写错了东西 , 或者就是你的数据格式有问题

0

妖王令剑

赞同来自:

我随便写了一个组件 , 数要多深, 数据就写多深 , 你还是直接打开组件 , 看看数据的结构 , 我觉得是数据结构的问题

0

妖王令剑

赞同来自:

代码 带上

<template>  
    <view>  
    <view class="tree-ul" v-for="(item,i) in data" :key="item.code+i">  
        <view class="isTrue" v-if="item.children">                  
            <view class="tree-item">  
                <label>{{item.name}}</label>  
                <span v-if="!opends[i]" @tap="onOpends(item,i)">&or;</span>  
                <span v-if="opends[i]"  @tap="onOpends(item,i)">&and;</span>  
            </view>  
            <tree-item class="children-box" :data="item.children" v-show="opends[i]"></tree-item>  
        </view>  
        <view class="tree-item isTrue"  v-if="!item.children">  
            <label>{{item.name}}</label>  
        </view>  
    </view></view>  
</template>  

<script>  
    export default {  
        name: "tree-item",  
        props:{  
            data: {  
                type: Array,  
                default: function(e) {  
                    return []  
                }  
            }  
        },  
        data() {  
            return {  
                opends: [],  
            };  
        },  
        onLoad() {  
        },  
        methods:{  
            onOpends(item,i){  
                this.$nextTick(function(){  
                    this.$set(this.opends,i,!this.opends[i])  
                })  
            }  
        }  
    }  
</script>  

<style>  
    .tree-box{  
        display: inline-block;  
        width: 220px;  
        border: 1px solid #eee;  
        overflow: hidden;  
        border-radius: 4px;  
    }  
    .tree-item{  
        display: flex;  
        overflow: hidden;  
        height: 32px;  
        border-bottom: 1px solid #eee;  
    }  
    .tree-item>label{  
        flex: 1;  
        line-height: 32px;  
        font-size: 14px;  
        overflow: hidden;  
        text-overflow: ellipsis;  
        white-space: nowrap;  
    }  
    .tree-item>span{  
        width: 32px;  
        height: 32px;  
        text-align: center;  
        line-height: 32px;  
    }  
    .isTrue{  
        padding-left: 15px;  
    }  
</style>  
0

破晓君

赞同来自:

递归组件本身, h5是兼容 但是在小程序里面是不支持的

0

txb_2008@163.com - 80后

赞同来自:


经过测试小程序和安卓下都只显示第一层!求高手帮忙看看!

0

txb_2008@163.com - 80后

赞同来自:

安卓端app也不支持递归组件。求解决办法!!!!!

0

txb_2008@163.com - 80后

赞同来自:

app下真的无法显示!

要回复问题请先登录注册