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
	            }]
          }]
 }]

转换方法例子如下

javascript">// 树形数据转化 （封装公共方法 我这是在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引入

javascript">// vue中引入
import {treeDataTranslate} from 'xxxx'

页面使用截取代码片段

javascript">// 使用
treeDataTranslate(res.data,'id','pid')

如果你使用了ele-ui 需要注意一些问题

javascript">// tree组件
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" @check="handleChange"></el-tree>
// defaultProps 需要根据返回字段做些修改
// 我就以上面所给的数据作为例子 在vue data里面定义一下
defaultProps: {
	children: 'children',
	 lable: 'name'
}