【js】通过parentId和id将后台返回的数据转换成树形结构

/**
 * 将后台数据转换为树形结构
 * @param pid   是你拿到的数据中的parentId
 * @param arr 	你拿的数据
 * @returns 
 */
 export const getTrees = (pid: string | number, arr: any) => {
  return arr.filter((item: any) => item.parentId === pid).map((item: any) => {
    item.children = getTrees(item.id, arr)
    return item
  })
}

像elementplus的cascader组件、vant的cascader组件等，都有他们要求的数据格式，所以用上面方法转换数据结构后，还要再操作一下属性值

/**
 * 将树形结构数据转换为级联要求的字段
 * @param tree 
 * @param map 
 * @returns 
 */
export const converTree = (tree: any, map: any = {
    label: 'name',
    value: 'id',
    children: 'children'
}) => {
	const result: any = [];
	tree.forEach((item: any) => {
		let value = item[ map.value ];
		let label = item[ map.label ];
		let children = item[ map.children ];
		if (children) {
		  children = converTree(children, map);
		}
		result.push({ value, label, children });
	})
	return result
}

使用：

//  这个0是拿到的数据里面最顶级的parentId的值，list就是拿到的数据
cascaderOptions.value = converTree(getTrees(0, list))