创建utils.js
/**
* 将一级的数据结构处理成树状数据结构
* @param {Object} obj {key, pKey, data}
* @param obj.key 字段名称 比如id
* @param obj.pKey 父字段名称 比如 pid
* @param obj.rootPValue 根节点的父字段的值
* @param obj.data 需要处理的数据
* @param obj.jsonData 是否深复制数据（默认是true）
* @return {Array} arr
*/
getTreeArr: (obj) => {
if (!Array.isArray(obj.data)) {
console.log('getTreeArr=>请传入数组')
return []
}
obj.jsonData = obj.jsonData === false ? obj.jsonData : true
const arr = obj.jsonData ? JSON.parse(JSON.stringify(obj.data)) : obj.data
const arr1 = []
// 将数据处理成数状结构
arr.forEach(item => {
let index = 0
item.children = []
arr.forEach(item1 => {
// 得到树结构关系
if (item[obj.key] === item1[obj.pKey]) {
item.children.push(item1)
}
// 判断根节点
if (item1[obj.key] !== item[obj.pKey]) {
index++
}
})
// 没传入根节点，根据当前数据结构得到根节点
if (!('rootPValue' in obj) && index === arr.length) {
arr1.push(item)
}
})
// 传入根节点，根据传入的根节点组成树结构
if ('rootPValue' in obj) {
arr.forEach(item => {
if (item[obj.pKey] === obj.rootPValue) {
arr1.push(item)
}
})
}
return arr1
}
使用
引入import globalFn from '../../config/utils.js'
var jsonDatas = [
{
'id': '1',
'pid': '0',
'name': '家用电器'
}, {
'id': '4',
'pid': '1',
'name': '大家电'
},
{
'id': '7',
'pid': '4',
'name': '空调'
}, {
'id': '8',
'pid': '4',
'name': '冰箱'
}, {
'id': '9',
'pid': '4',
'name': '洗衣机'
}, {
'id': '10',
'pid': '4',
'name': '热水器'
},
{
'id': '5',
'pid': '1',
'name': '生活电器'
},
{
'id': '2',
'pid': '0',
'name': '服饰'
},
{
'id': '13',
'pid': '2',
'name': '男装'
}, {
'id': '14',
'pid': '2',
'name': '女装'
},
{
'id': '3',
'pid': '0',
'name': '化妆'
},
{
'id': '11',
'pid': '3',
'name': '面部护理'
}, {
'id': '12',
'pid': '3',
'name': '口腔护理'
}, {
'id': '15',
'pid': '7',
'name': '海尔空调'
}, {
'id': '16',
'pid': '7',
'name': '美的空调'
}, {
'id': '19',
'pid': '5',
'name': '加湿器'
}, {
'id': '20',
'pid': '5',
'name': '电熨斗'
}]
console.log(oldData, '后台返回的---原数组')
let treeArr = globalFn.getTreeArr({ key: 'id', pKey: 'pid', data: jsonDatas, jsonData: false })
console.log(treeArr, 'treeArr')
