element-ui tree树怎么加载后台数据?

element 是下面这种的数据格式,但是后台给返回的所以数据是的对象格式层级嵌套,这个要怎么样循环进去?

export default {

data() {
  return {
    data: [{
      label: '一级 1',
      children: [{
        label: '二级 1-1',
        children: [{
          label: '三级 1-1-1'
        }]
      }]
    }, {
      label: '一级 2',
      children: [{
        label: '二级 2-1',
        children: [{
          label: '三级 2-1-1'
        }]
      }, {
        label: '二级 2-2',
        children: [{
          label: '三级 2-2-1'
        }]
      }]
    }, {
      label: '一级 3',
      children: [{
        label: '二级 3-1',
        children: [{
          label: '三级 3-1-1'
        }]
      }, {
        label: '二级 3-2',
        children: [{
          label: '三级 3-2-1'
        }]
      }]
    }],
    defaultProps: {
      children: 'children',
      label: 'label'
    }
  };
 }
};
阅读 9.2k
2 个回答

你理解错了,后台给的东西不需要你循环,这个数组你也不需要你定义内容,让后端基本上按这个格式返回就可以了,给你看看我返回的

{
    "status": 1,
    "message": "获取成功",
    "data": [{
        "id": 4,
        "parent_id": 0,
        "url": "content",
        "name": "内容",
        "icon": "el-icon-menu",
        "sort": 100,
        "created_at": "2018-07-05 12:06:27",
        "updated_at": "2018-07-05 14:37:04",
        "deleted_at": null,
        "_child": [{
            "id": 5,
            "parent_id": 4,
            "url": "articles",
            "name": "内容管理",
            "icon": null,
            "sort": 100,
            "created_at": "2018-07-05 12:07:29",
            "updated_at": "2018-07-05 14:24:55",
            "deleted_at": null,
            "is_last": true
        }, {
            "id": 6,
            "parent_id": 4,
            "url": "category",
            "name": "类别管理",
            "icon": null,
            "sort": 100,
            "created_at": "2018-07-05 14:24:06",
            "updated_at": "2018-07-05 14:25:46",
            "deleted_at": null,
            "is_last": true
        }, {
            "id": 7,
            "parent_id": 4,
            "url": "article_edit",
            "name": "编辑内容",
            "icon": null,
            "sort": 100,
            "created_at": "2018-07-05 14:26:43",
            "updated_at": "2018-07-05 14:26:43",
            "deleted_at": null,
            "is_last": true
        }],
        "is_last": false
    }, {
        "id": 8,
        "parent_id": 0,
        "url": "system",
        "name": "系统",
        "icon": "el-icon-menu",
        "sort": 100,
        "created_at": "2018-07-05 14:28:09",
        "updated_at": "2018-07-05 14:37:34",
        "deleted_at": null,
        "_child": [{
            "id": 10,
            "parent_id": 8,
            "url": "config",
            "name": "配置管理",
            "icon": null,
            "sort": 99,
            "created_at": "2018-07-05 17:02:22",
            "updated_at": "2018-07-05 17:02:22",
            "deleted_at": null,
            "is_last": true
        }, {
            "id": 9,
            "parent_id": 8,
            "url": "menu",
            "name": "菜单管理",
            "icon": null,
            "sort": 100,
            "created_at": "2018-07-05 14:28:24",
            "updated_at": "2018-07-05 14:28:24",
            "deleted_at": null,
            "is_last": true
        }],
        "is_last": false
    }]
}

你可以跟你的后台要求给你一个树状结构的数据,我最近也用到这个,但是我们没有树状结构的数据,都是一条一条的数据,每一条里面有父级id和它本身的id,用递归把父级id等于id的数据塞到他的child下面,就是在前台我们自己组合出树状数据传给tree组件。你的问题描述不是很清晰,能否根据你的业务再详细描述一下。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题