element,tree树结构下拉列表（非官方数据格式）

2019-04-16 本文已影响0人 jwHubor

最近遇到一个问题，因为要并入别的系统进入当前系统，有些数据就是之前后台写的，

所以当我想使用element组件里的tree树结构的时候，后台返回的数据跟官方文档并不一致。

于是经历自己的思考和百度之后，解决了这个问题，现在把过程和方法分享一下！

后台传入的数据为：

[

{ "code": "110000","name": "北京市", "pId": "0","id": "1"},

{ "code": "110101", "name": "东城区","pId": "1","id": "2"},

{"code": "110102","name": "西城区","pId": "1","id": "3"},

{"code": "110105","name": "朝阳区","pId": "1","id": "4"}

]

参数是有code,name,pId,id的数据

element官方文档的数据格式为：

[{

id: 2,

label: '一级 2',

children: [{

id: 5,

label: '二级 2-1'

}, {

id: 6,

label: '二级 2-2'

}]

}

]

目标效果是下面这样：

效果图

先写一个数据处理的js文件：shuju.js

循环父节点

调用子节点方法

在当前获得数据的vue页面，引入shuju.js

引入toTreeData方法

接着：

使用toTreeData

在axios请求得到数据之后，调用toTreeData（data,'id','pId','name','code'）

这个方法就能得到数据：如下

再将得到数据传到当前的data里面，再html里拿到这个data就能完成渲染

注意的是，调用toTreeData的时候，第一个参数是axios得到的数据，

后面几个视你得到的数据而定，有什么就可以加什么，但是相应的，也要在shuju.js

里面修改。