数据接口返回的数据格式如下：

{

"errcode":"1",

"list":[

{

"stone_name":"KX008",

"customer_name":"KKF",

"customer_id":"306569681005711360",

"child":[

{

"gold_name":"18K白",

"child":[

{

"production_quantity":"0",

"quantity_shipped":"0",

"create_order_time":"2019-08-07",

"order_quantity":"1",

"order_num":"DD190806001",

"shipments_time":"",

"order_info":""

},

{

"production_quantity":"0",

"quantity_shipped":"0",

"create_order_time":"2019-08-07",

"order_quantity":"1",

"order_num":"DD190806002",

"shipments_time":"",

"order_info":""

}

]

}

]

},

{

"stone_name":"KX001",

"customer_name":"宝利金",

"customer_id":"293613507226636288",

"child":[

{

"gold_name":"18K白",

"child":[

{

"production_quantity":"2",

"quantity_shipped":"0",

"create_order_time":"2019-08-02",

"order_quantity":"2",

"order_num":"DD190802001",

"shipments_time":"",

"order_info":"手寸17-23中间多"

},

{

"production_quantity":"100",

"quantity_shipped":"0",

"create_order_time":"2019-08-03",

"order_quantity":"100",

"order_num":"DD190803001",

"shipments_time":"",

"order_info":""

}

]

}

]

},

{

"stone_name":"KX007",

"customer_name":"赛菲尔",

"customer_id":"305891049107099648",

"child":[

{

"gold_name":"18K红白分色",

"child":[

{

"production_quantity":"100",

"quantity_shipped":"0",

"create_order_time":"2019-08-07",

"order_quantity":"100",

"order_num":"DD190807001",

"shipments_time":"",

"order_info":""

}

]

}

]

},

{

"stone_name":"KX012",

"customer_name":"金六福吉祥",

"customer_id":"317482253271699456",

"child":[

{

"gold_name":"18K红白分色",

"child":[

{

"production_quantity":"72",

"quantity_shipped":"0",

"create_order_time":"2019-08-03",

"order_quantity":"72",

"order_num":"DD190803002",

"shipments_time":"",

"order_info":"手寸19-22"

}

]

}

]

},

{

"stone_name":"KX009",

"customer_name":"金麒",

"customer_id":"307300237871943680",

"child":[

{

"gold_name":"18K红",

"child":[

{

"production_quantity":"40",

"quantity_shipped":"0",

"create_order_time":"2019-08-05",

"order_quantity":"40",

"order_num":"DD190805001",

"shipments_time":"",

"order_info":"不要钉珠"

}

]

}

]

}

]

}

页面显示效果

js调用方法

let a = tableData(res.list, [{ name: 'gold_name', value: '小计' },{ name: 'customer_name', value: '合计' },{ name: 'customer_name', value: '总计',totalData:true}]);

res.list 为接口返回的数据

// 数据报表数据处理方法

//arrs 传需要合计的数据的key值 例如[{ name: 'gold_name', value: '小计' },{ name: 'customer_name', value: '合计' },{ name: 'customer_name', value: '总计' }]

//相同的 name 没有办法做处理

export function tableData(list, arrs = [], parent = {}) {

let newList = []

if (Array.isArray(list) && list.length > 0) {

list.map(item => {

let key_of_arr = Object.keys(item).filter(el => Array.isArray(item[el]));//获取当前对象中value为数组的key值

let key_of_string = Object.keys(item).filter(el => !Array.isArray(item[el]));//获取当前对象中value不为数组的key值

let bol = key_of_arr.length > 0 ? key_of_arr.every(el => el && item[el].length > 0) : false;//判断当前对象中是否存在数组 true为存在 false为不存在

let data = {};

let parent_keys = Object.keys(parent).filter(el => !Array.isArray(parent[el]));//获取从上级数据中出入的不为数组的key值

if (parent_keys.length > 0) {//如果存在key 将key保存

parent_keys.forEach(el => { data[el] =parent[el] });

}

if (!bol) {//如果当前对象中没有数据组或数组的长度小于1 则将数据拼接并放入返回的数据中

newList.push(Object.assign(data, item))

} else {

if (key_of_string.length > 0) {//将前一层的数据合并到当前数据层中

key_of_string.forEach(el => { data[el] =item[el]});

}

let arr = tableData(item[key_of_arr[0]],arrs, data)

newList = [...newList, ...arr]//合并数组

if(arrs.length>0){

let num=key_of_string.reduce((prev, curr) =>arrs.findIndex(el=>el.name==curr&&!el.totalData)>-1?prev+=1:prev,0)//判断合并数组中在当前数据中出现的次数

if(num>0){

let totalData=JSON.parse(JSON.stringify(data));

key_of_string.forEach(el=>{//给当前数据赋值

let index=arrs.findIndex(els=>els.name==el)

if(index>=0){

for(let i=0;iObject.keys(el).every(els=>data[els]?data[els]==el[els]:(arrs.findIndex(i=>i.name==els)>-1?arrs.find(i=>i.name==els).value!=el[els]:true)))

Object.keys(total[0]).forEach(el=>{//算合计

if(!isNaN(Number(total[0][el]))){

if(el.indexOf('num')>-1){

totalData[el]=total.map(els=>els[el]).reduce((prev, curr) => Number(prev || 0) + Number(curr || 0))

} else{

totalData[el]=total.map(els=>els[el]).reduce((prev, curr) => Number(prev || 0) + Number(curr || 0)).toFixed(5)

}

}

})

newList.push(totalData)

}

}

}

})

if(JSON.stringify(parent)=='{}'&&arrs.length>0&&arrs[arrs.length-1].totalData){//判断最后一条有没有所有数据汇总

let last=newList.filter(el=>arrs.every(els=>els.totalData?(el[els.name]!=els.value):(el[els.name]==els.value)))

let lastData={};

Object.keys(last[0]).forEach(el=>{

if(!isNaN(Number(last[0][el]))&&el!=arrs[arrs.length-1].name){

if(el.indexOf('num')>-1){

lastData[el]=last.map(els=>els[el]).reduce((prev, curr) => Number(prev || 0) + Number(curr || 0))

} else{

lastData[el]=last.map(els=>els[el]).reduce((prev, curr) => Number(prev || 0) + Number(curr || 0)).toFixed(5)

}

}else if(el==arrs[arrs.length-1].name){

lastData[el]=arrs[arrs.length-1].value;

}else{

lastData[el]=last[0][el]

}

})

newList.push(lastData)

}

}

return newList;

}