1.后端返回的数据是一个一维数组,需要前端根据id 和父id 的关系自己构建树形结构,这是源数据
let arr = [
{
id: '15b5bc0581e92c9b5f4c41a52e934955',
name: '我是子节点2-1',
parentId: '8b08a970-6533-42ca-b0b5-84b1a2f4d402',
deptType: 1,
},
{
id: '20f20704a6f038e1074f4e86f3a67d7b',
name: '我是子节点2-2',
parentId: '8b08a970-6533-42ca-b0b5-84b1a2f4d402',
deptType: 1,
},
{
id: '77ad26da4c4cab3648961c7033eb53b8',
name: '我是子节点2-3',
parentId: '8b08a970-6533-42ca-b0b5-84b1a2f4d402',
deptType: 1,
},
{
id: '1810491229629181953',
name: '我是子节点2-1-1',
parentId: '15b5bc0581e92c9b5f4c41a52e934955',
deptType: 1,
},
{
id: '1795990856046501889',
name: '我是子节点2-1-2',
parentId: '15b5bc0581e92c9b5f4c41a52e934955',
deptType: 1,
},
{
id: '8b08a970-6533-42ca-b0b5-84b1a2f4d402',
name: '我是父节点1-1',
parentId: '',
deptType: 2,
},
]
2.需要转换成目标格式的数据,如下
let arr = [
{
id: '8b08a970-6533-42ca-b0b5-84b1a2f4d402',
name: '我是父节点1-1',
parentId: '',
deptType: 2,
children: [
{
id: '15b5bc0581e92c9b5f4c41a52e934955',
name: '我是子节点2-1',
parentId: '8b08a970-6533-42ca-b0b5-84b1a2f4d402',
deptType: 1,
children: [
{
id: '1810491229629181953',
name: '我是子节点2-1-1',
parentId: '15b5bc0581e92c9b5f4c41a52e934955',
deptType: 1,
},
{
id: '1795990856046501889',
name: '我是子节点2-1-2',
parentId: '15b5bc0581e92c9b5f4c41a52e934955',
deptType: 1,
},
],
},
{
id: '20f20704a6f038e1074f4e86f3a67d7b',
name: '我是子节点2-2',
parentId: '8b08a970-6533-42ca-b0b5-84b1a2f4d402',
deptType: 1,
},
{
id: '77ad26da4c4cab3648961c7033eb53b8',
name: '我是子节点2-3',
parentId: '8b08a970-6533-42ca-b0b5-84b1a2f4d402',
deptType: 1,
},
],
},
]
3.新建 utils/tree.ts文件,代码如下
/**
* 构造树型结构数据
* @param {*} data 数据源
* @param {*} id id字段 默认 'id'
* @param {*} parentId 父节点字段 默认 'parentId'
* @param {*} children 孩子节点字段 默认 'children'
*/
export const handleTree = (data: any[], id?: string, parentId?: string, children?: string) => {
if (!Array.isArray(data)) {
console.warn('data must be an array')
return []
}
const config = {
id: id || 'id',
parentId: parentId || 'parentId',
childrenList: children || 'children'
}
const childrenListMap = {}
const nodeIds = {}
const tree: any[] = []
for (const d of data) {
const parentId = d[config.parentId]
if (childrenListMap[parentId] == null) {
childrenListMap[parentId] = []
}
nodeIds[d[config.id]] = d
childrenListMap[parentId].push(d)
}
for (const d of data) {
const parentId = d[config.parentId]
if (nodeIds[parentId] == null) {
tree.push(d)
}
}
for (const t of tree) {
adaptToChildrenList(t)
}
function adaptToChildrenList(o) {
if (childrenListMap[o[config.id]] !== null) {
o[config.childrenList] = childrenListMap[o[config.id]]
}
if (o[config.childrenList]) {
for (const c of o[config.childrenList]) {
adaptToChildrenList(c)
}
}
}
return tree
}
4.直接在页面使用
import { handleTree } from '@/utils/tree'
//传入数组
let arr = [
{
id: '15b5bc0581e92c9b5f4c41a52e934955',
name: '我是子节点2-1',
parentId: '8b08a970-6533-42ca-b0b5-84b1a2f4d402',
deptType: 1,
},
{
id: '20f20704a6f038e1074f4e86f3a67d7b',
name: '我是子节点2-2',
parentId: '8b08a970-6533-42ca-b0b5-84b1a2f4d402',
deptType: 1,
},
{
id: '77ad26da4c4cab3648961c7033eb53b8',
name: '我是子节点2-3',
parentId: '8b08a970-6533-42ca-b0b5-84b1a2f4d402',
deptType: 1,
},
{
id: '1810491229629181953',
name: '我是子节点2-1-1',
parentId: '15b5bc0581e92c9b5f4c41a52e934955',
deptType: 1,
},
{
id: '1795990856046501889',
name: '我是子节点2-1-2',
parentId: '15b5bc0581e92c9b5f4c41a52e934955',
deptType: 1,
},
{
id: '8b08a970-6533-42ca-b0b5-84b1a2f4d402',
name: '我是父节点1-1',
parentId: '',
deptType: 2,
},
]
treeList= handleTree(arr, 'id', 'parentId')