LEARNER0
LEARNER0
  • 发布:2018-11-15 23:23
  • 更新:2 天前
  • 阅读:1493

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

分类:nvue

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

2018-11-15 23:23 分享
已邀请:
1551665485@qq.com

1551665485@qq.com

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

  • LEARNER0 (作者)

    主键是自己根据网上vue的教程改的,在组件的onload里面打印过日志,数据正常解析出来的。不知道是我哪里没写对,还是有bug。

    2018-11-16 09:57

86300845@qq.com

86300845@qq.com

同样的问题

86300845@qq.com

86300845@qq.com

折腾一夜了,求解答

  • LEARNER0 (作者)

    放弃了。哈哈

    2018-12-03 10:58

  • 297008285@qq.com

    我也要树结构的排版,,,也弄了一天没弄出来,,群里和提问都问了。。都没人鸟。

    2018-12-06 09:51

  • 297008285@qq.com

    用两个组件互相调用也一样,报错 说递归啥啥的,,然后自动停止了。

    2018-12-06 09:53

297008285@qq.com

297008285@qq.com

同样的问题

妖王令剑

妖王令剑

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

  • 86300845@qq.com

    n您做成功了吗,代码能学习下吗

    2018-12-20 15:09

  • 妖王令剑

    我没有这组件的代码呀 , 怎么试

    2018-12-21 11:03

妖王令剑

妖王令剑

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

妖王令剑

妖王令剑

代码 带上

<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>  
  • LEARNER0 (作者)

    谢谢,我去试试看

    2018-12-24 10:24

  • txb_2008@163.com

    我试过你这个,h5下没问题,但是安卓下还是只显示第一层为什么呢?

    2019-02-07 19:36

  • txb_2008@163.com

    安卓下只显示第一层为什么呢?

    2019-02-07 20:04

  • txb_2008@163.com

    小程序和安卓app下无法递归,知道吗?

    2019-02-07 22:22

破晓君

破晓君

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

txb_2008@163.com

txb_2008@163.com


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

txb_2008@163.com

txb_2008@163.com

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

txb_2008@163.com

txb_2008@163.com

app下真的无法显示!

逍涯

逍涯

表示同样不支持!!!

txb_2008@163.com

txb_2008@163.com

app下真的无法显示!

chengsenran

chengsenran

同样的问题,在浏览器上是可以递归的 APP上 是不行的 只显示第一级 求大神出来 给个解决方案

18039292996@163.com

18039292996@163.com

有解决的方法了吗?

DCloud_heavensoft

DCloud_heavensoft

插件市场有tree

要回复问题请先登录注册