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

今天和前台联调时，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"
}