需求
1.根据数组对象中的某一个参数值相同来合并行 2.根据数组对象中某一俩值来进行排序
效果
主要思路
1.通过sort进行多字段排序来将需要合并的字段进行排序 2.通过对table数据处理,添加合并标识 3.通过table的span-method方法来实行table的合并
相关代码
html
<el-table
:data="tableData.detailsList"
:span-method="objectSpanMethod"
style="width: 100%;margin: 20px 0"
border>
<el-table-column
width="100"
prop="target"
label="检验分类">
</el-table-column>
<el-table-column
prop="templetName"
width="130"
label="要求项目">
</el-table-column>
</el-table>
js
// table数据处理
let arrTarget=[]
let pos
res.data.detailsList.forEach(item=> {
item.rowspan = 1
})
for(let i = 0; i < res.data.detailsList.length; i++) {
if (i === 0) {
vm.spanArr.push(1);
pos = 0
} else {
if (res.data.detailsList[i].target === res.data.detailsList[i - 1].target) {
vm.spanArr[pos] += 1;
vm.spanArr.push(0);
} else {
vm.spanArr.push(1);
pos = i;
}
}
}
res.data.detailsList.forEach(item=> {
if (arrTarget.length !== 0) {
if (arrTarget.indexOf(item.target) === -1) {
arrTarget.push(item.target)
}
}else {
arrTarget.push(item.target)
}
})
vm.tableData = res.data;
// table合并函数--el-table绑定的span-method的函数
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0 || columnIndex > 6) {
let _row = this.spanArr[rowIndex];
console.log(_row,_row);
let _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}
},