Vue ElementUI 树形结构Tree组件报错Invalid prop: type check failed for prop “data”. Expected Array, got Object

  • A+
所属分类:Vue

今天和前台联调时,vue的树形结构Tree组件报错如下:

Invalid prop: type check failed for prop "data". Expected Array, got Object

Error in callback for watcher "data": "TypeError: children.indexOf is not a function"

我用postman测了下,我后台返回给前台的接口是没问题的。

前台是直接把我返回结果里的data放到Tree组件里报的错,但是把data.children放进去就没问题。按理说不应该啊,data里每一层的结构都是一样的,不可能说data.children可以,data就不行啊。

返回结果如下:

{
    "code": 200,
    "data": {
        "catId": -1,
        "catName": "root",
        "children": [
            {
                "catId": 0,
                "catName": "所有分类",
                "children": [
                    {
                        "catId": 16,
                        "catName": "土家族",
                        "children": [
                            {
                                "catId": 17,
                                "catName": "族源",
                                "children": null
                            }
                        ]
                    },
                    {
                        "catId": 18,
                        "catName": "渔业经济",
                        "children": null
                    },
                    {
                        "catId": 1,
                        "catName": "山脉",
                        "children": [
                            {
                                "catId": 3,
                                "catName": "山脉12",
                                "children": null
                            },
                            {
                                "catId": 2,
                                "catName": "溶洞",
                                "children": [
                                    {
                                        "catId": 4,
                                        "catName": "gaga324444",
                                        "children": null
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    },
    "message": "操作成功",
    "status": "OK"
}
 

在网上基本上查不到相关的错误,好吧,看下vue elementUI的官网吧。

可以看到参数说明里data类型为array型,而我在最上层包了一层所有分类,是个Object型,所以传入data.children是可以的,因为children是一个array。

参数说明类型可选值默认值
data展示数据array

因为业务里我需要最上层是一个所有分类的根节点,解决方法就是在最外面再套一层,然后把data.children传进去。修正后的返回结果如下:

{
    "code": 200,
    "data": {
        "catId": -1,
        "catName": "root",
        "children": [
            {
                "catId": 0,
                "catName": "所有分类",
                "children": [
                    {
                        "catId": 16,
                        "catName": "土家族",
                        "children": [
                            {
                                "catId": 17,
                                "catName": "族源",
                                "children": null
                            }
                        ]
                    },
                    {
                        "catId": 18,
                        "catName": "渔业经济",
                        "children": null
                    },
                    {
                        "catId": 1,
                        "catName": "山脉",
                        "children": [
                            {
                                "catId": 3,
                                "catName": "山脉12",
                                "children": null
                            },
                            {
                                "catId": 2,
                                "catName": "溶洞",
                                "children": [
                                    {
                                        "catId": 4,
                                        "catName": "gaga324444",
                                        "children": null
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    },
    "message": "操作成功",
    "status": "OK"
}

 

ZPY

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: