element-ui合並行實現

需求：

　　客戶料號以及銷售訂單號一致的數據只顯示其中一個超PO數

實現的效果如下：

 

代碼如下：

1.頁面代碼

1. <el-row style="margin-left:-50px"> <el-col :sapn="24"> <el-form-item> <h4 style="font-size:14px;margin:0 0 10px 0;"> 成品報廢明細表 </h4> <el-table :data="Finished_M_List" border size="mini" :span-method="objectSpanMethod" style="text-align:center" > <el-table-column prop="KUNNR" label="客戶編號" width="100"></el-table-column> <el-table-column prop="VKBUR" label="營業部門" width="100"></el-table-column> <el-table-column prop="AUFNR" label="工單號" width="100"></el-table-column> <el-table-column prop="MENGE" label="超PO數" width="80" ></el-table-column> <el-table-column prop="ZCSMT" label="客戶料號" width="100"></el-table-column> <el-table-column prop="VBELN" label="銷售訂單號" width="100"></el-table-column> <el-table-column prop="BDMNG" label="報廢數量" width="80"></el-table-column> <el-table-column prop="KOSTL" label="責任部門" width="80"></el-table-column> <el-table-column prop="ZAMNT" label="報廢金額" width="80"></el-table-column> <el-table-column prop="WAERS" label="幣別" width="80"></el-table-column> <el-table-column prop="CHARG" label="批次" width="100"></el-table-column> </el-table> </el-form-item> </el-col> </el-row>

2.自定義處理數組的代碼

initFinished: function () {
var _this = this;
axios.get('/FinishedInventory_Sap/initFinished?WorkID=' + _this.viewModel.OID.value).then(function (res) {
_this.FinishedList = res.data.Data;

//復制源數據
_this.Finished_M_List = JSON.parse(JSON.stringify(_this.FinishedList));

//定義臨時空數組，接收根據客戶料號和銷售訂單號重新排序后的數組
let TemporaryList = [];
//遍歷報廢成品數組
for (let i = 0; i < _this.Finished_M_List.length; i++) {
//判斷元素狀態（初始狀態為空，添加到臨時數組后置1）
if (_this.Finished_M_List[i].STATE != 1) {
TemporaryList.push(_this.Finished_M_List[i])
_this.Finished_M_List[i].STATE = 1;
}
//從i+1個元素開始查找客戶料號、銷售訂單號相同的元素
for (let j = i + 1; j < _this.Finished_M_List.length; j++) {
//已加入臨時數組的元素不參與后續查找
if (_this.Finished_M_List[j].STATE != 1) {
if (_this.Finished_M_List[i].ZCSMT == _this.Finished_M_List[j].ZCSMT && _this.Finished_M_List[i].VBELN == _this.Finished_M_List[j].VBELN) {
TemporaryList.push(_this.Finished_M_List[j]);
_this.Finished_M_List[j].STATE = 1;
}
}
console.log(TemporaryList)
}

}
_this.Finished_M_List = JSON.parse(JSON.stringify(TemporaryList))
_this.rowspan();
})
}

3.合並規則代碼

//設置合並規則
rowspan() {
// 在data里面定義
this.spanArr = []
// 在data里面定義
this.position = 0
console.log(this.Finished_M_List)
this.Finished_M_List.forEach((item, index) => {
if (index === 0) {
this.spanArr.push(1)
this.position = 0
// 設置序號
//item.sequence = index + 1;

} else {
if (this.Finished_M_List[index].ZCSMT === this.Finished_M_List[index - 1].ZCSMT && this.Finished_M_List[index].VBELN === this.Finished_M_List[index - 1].VBELN) {
// 連續有幾行項目名名稱相同
this.spanArr[this.position] += 1
// 名稱相同后往數組里面加一項0
this.spanArr.push(0)

// 當項目名稱相同時，設置當前序號和前一個相同
//this.Finished_M_List[index].sequence = this.Finished_M_List[index - 1].sequence
} else {
this.spanArr.push(1)
this.position = index
// 當項目名稱不同時，將當前序號設置為前一個序號+1
//this.Finished_M_List[index].sequence = this.Finished_M_List[index - 1].sequence + 1
}
}
})
//console.log(this.spanArr)
}

}

4.最后是定義objectSpanMethod方法

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
//通過給table傳入span - method方法可以實現合並行或列，方法的參數是一個對象，里面包含當前行row、當前列column、當前行號rowIndex、
//當前列號columnIndex四個屬性。該函數可以返回一個包含兩個元素的數組，第一個元素代表rowspan，第二個元素代表colspan。
//也可以返回一個鍵名為rowspan和colspan的對象。
// 表格合並行
// 序號列也進行合並(第一列)
if (columnIndex === 3) {
// this.spanArr這個數組里面存的是table里面連續的有幾條數據相同
// 例如:[1,1,2,0,2,0]
// 1 代表的沒有連續的相同的
// 2 代表連續的兩個相同
// 0 代表是和上一條內容相同
const _row = this.spanArr[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
}

}