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
}
}

}