账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    请问使用iview树形控件显示时如何处理从服务器获取来的数据。
    26
    0
    1. 我在项目中使用了iview的树形控件,希望实现从数据库读取来各个节点的数据(json格式),然后通过这些数据形成iview树形控件的数据参数,然后绘制渲染在页面上。
    2. 我的问题主要是我没有好的方法将得到的数据很好的处理成iview树形控件所需要的数据格式。我看到官网示例给出的数据是层层嵌套的对象数组,也就是这样子:
    3. 我自己第一次使用的方式比较蠢,就不贴图了,采用在methods生命周期函数中将之前已经获取并存入本地的数据(数组)读出,循环数组,将第一个数据作为根节点,后面的根据id号的位数一步一步放进新的对象数组中,本人新手,知道这个方法很蠢而且效果不好,希望各位能给个思路或者建议,如何将数据处理成合适的格式然后渲染,谢谢。
    data5: [//官网实例的数据,可嵌套的节点属性的数组,生成tree的数据
                        {
                            title: 'parent 1',//根节点标题
                            expand: true,//是否展开所属节点
                            render: (h, { root, node, data }) => {//定义当前节点渲染内容
                                return h('span', {
                                    style: {
                                        display: 'inline-block',
                                        width: '100%'
                                    }
                                }, [
                                    h('span', [
                                        h('Icon', {
                                            props: {
                                                type: 'ios-folder-outline'
                                            },
                                            style: {
                                                marginRight: '8px'
                                            }
                                        }),
                                        h('span', data.title)
                                    ]),
                                    h('span', {
                                        style: {
                                            display: 'inline-block',
                                            float: 'right',
                                            marginRight: '32px'
                                        }
                                    }, [
                                        h('Button', {
                                            props: Object.assign({}, this.buttonProps, {
                                                icon: 'ios-plus-empty',
                                                type: 'primary'
                                            }),
                                            style: {
                                                width: '52px'
                                            },
                                            on: {
                                                click: () => { this.append(data) }
                                            }
                                        })
                                    ])
                                ]);
                            },
                            children: [//子节点属性数组
                                {
                                    title: 'child 1-1',
                                    expand: true,
                                    children: [
                                        {
                                            title: 'leaf 1-1-1',
                                            expand: true
                                        },
                                        {
                                            title: 'leaf 1-1-2',
                                            expand: true
                                        }
                                    ]
                                },
                                {
                                    title: 'child 1-2',
                                    expand: true,
                                    children: [
                                        {
                                            title: 'leaf 1-2-1',
                                            expand: true
                                        },
                                        {
                                            title: 'leaf 1-2-1',
                                            expand: true
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 花语十 普通会员 1楼
      502 Bad Gateway

      502 Bad Gateway


      nginx
    更多回答
    网站公告
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部