合并后的效果图
1.效果图
合并后的效果图
合并后的效果图
2.从后端服务获取到的数据格式如下：
var json = [{"name":"夏雨","idcard":"E123456","orderNo":"HNLD8888191222142330"},
{"name":"夏雨","idcard":"E123456","orderNo":"HNLD8888191220142359"},
{"name":"夏雨","idcard":"E123456","orderNo":"HNLD8888191220142319"}];
3.页面元素：
<el-table>
<el-table-column>
<el-table-column>
<el-table-column>
<el-table-column>
4.javascript脚本：
//统计列总数 前提是必须保证【顺序性】
getSpanArr(data) {
// 订单合并
this.spanArrOrd = []
data.forEach((element,index) => {
if(index === 0){ // 第一个
this.posOrd = 0
this.spanArrOrd.push(1)
return
}
if(element.orderId === data[index-1].orderId){ // 与前一个比较
this.spanArrOrd[this.posOrd] += 1
this.spanArrOrd.push(0)
return
}
// 中断视为新数据
this.posOrd = index
this.spanArrOrd.push(1)
})
// 客户合并
this.spanArrCus = []
data.forEach((element,index) => {
if(index === 0){ // 第一个
this.posCus = 0
this.spanArrCus.push(1)
return
}
if(element.customerId === data[index-1].customerId){ // 与前一个比较
this.spanArrCus[this.posCus] += 1
this.spanArrCus.push(0)
return
}
// 中断视为新数据
this.posCus = index
this.spanArrCus.push(1)
})
// 销售员
this.spanArrSal = []
data.forEach((element,index) => {
if(index === 0){ // 第一个
this.posSal = 0
this.spanArrSal.push(1)
return
}
if(element.salesMan === data[index-1].salesMan){ // 与前一个比较
this.spanArrSal[this.posSal] += 1
this.spanArrSal.push(0)
return
}
// 中断视为新数据
this.posSal = index
this.spanArrSal.push(1)
})
}
5.调用
this.getSpanArr(json)
閱讀更多 萬里之行積於跬步 的文章
