js/elementui 树形结构数据转化(后台平铺返回)
// 后端返回格式
var data = [
{"id":2,"name":"aaa","pid":null},
{"id":3,"name":"bbb","pid":2},
{"id":5,"name":"ccc","pid":2},
{"id":100,"name":"ddd","pid":2},
{"id":6,"name":"eee","pid":2},
{"id":601,"name":"fff","pid":6},
{"id":602,"name":"ggg","pid":6},
]
// 而你期望得到的数据结构
data: [{
name: 'aaa',
id: 2,
pid: null
children: [{ // 二级
name: 'bbb',
id: 3,
pid: 2
},{
name: 'ccc',
id: 5,
pid: 2
},{
name: 'ddd',
id: 100,
pid: 2
},{
name: 'eee',
id: 6,
pid: 2
children: [{ // 三级
name: 'fff',
id: 601,
pid: 6
},{
name: 'ggg',
id: 602,
pid: 6
}]
}]
}]
转换方法例子如下
// 树形数据转化 (封装公共方法 我这是在vue里写的)
// data 原数组, id 子id, pid 父id
export function treeDataTranslate (data,id = 'pid', pid='parentId') {
var res = []
var temp = {}
for(var i = 0; i < data.length; i++){
temp[data[i][id]] = data[i]
}
for (var k = 0; k <data.length; k++) {
if (temp[data[k][pid]] && data[[k][id]] !== data[k][pid]) {
if (!temp[data[k][pid]]['children']) {
temp[data[k][pid]]['children'] = []
}
if (!temp[data[k][pid]]['_level']) {
temp[data[k][pid]]['_level'] = 1
}
data[k]['_level'] = temp[data[k][pid]]._level + 1
temp[data[k][pid]]['children'].push(data[k])
} else {
res.push(data[k])
}
}
return res
}
vue引入
// vue中引入
import {treeDataTranslate} from 'xxxx'
页面使用截取代码片段
// 使用
treeDataTranslate(res.data,'id','pid')
如果你使用了ele-ui 需要注意一些问题
// tree组件
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" @check="handleChange"></el-tree>
// defaultProps 需要根据返回字段做些修改
// 我就以上面所给的数据作为例子 在vue data里面定义一下
defaultProps: {
children: 'children',
lable: 'name'
}
创作不易需要鼓励,觉得有点帮助的话帮我点个赞吧!!!