合併後的效果圖
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)
閱讀更多 萬里之行積於跬步 的文章
