JS数组转树形结构数据

• 框架：vue2 + element-ui

• 需求：实现部门选择，呈现树状图结构

  效果图
  

   后端返回数据为所有部门的list数据，由前端根据parentId字段判断上下级部门关系
   返回的数据结构：
  

/**
 * 构造树型结构数据
 * @param {*} data 数据源
 * @param {*} id id字段 默认 'id'
 * @param {*} parentId 父节点字段 默认 'parentId'
 * @param {*} children 孩子节点字段 默认 'children'
 */
export function handleTree(data, id, parentId, children) {
	id = id || 'id'
	parentId = parentId || 'parentId'
	children = children || 'children'
	let result = []
	//对源数据深度克隆
	data = JSON.parse(JSON.stringify(data))
	if (!Array.isArray(data)) {
		return result
	}
	data.forEach((item) => {
		delete item[children]
	})
	let map = {}
	data.forEach((item) => {
		map[item[id]] = item
	})
	data.forEach((item) => {
		let parent = map[item[parentId]]
		if (parent) {
		parent[children] || (parent[children] = [])
		parent[children].push(item)
		} else {
		result.push(item)
		}
	})
  return result
}