html代码:
//`template上`
<el-table
:data="tableData"
border
ref="filterTable"
:span-method="chengeShowMethod"
>
<!-- 表头 + 表中的数据-->
<el-table-column type="index" label="序号" style="min-width: 80px"></el-table-column>
<el-table-column
v-for="(e, i) in columns"
:key="i"
show-overflow-tooltip
header-align="center"
:prop="e.fieldCode"
:label="e.fieldName"
:formatter="formatter"
>
</el-table-column>
</el-table>
//js代码
// 改变第一列的数据
chengeShowMethod({ row, column, rowIndex, columnIndex }){
if (columnIndex === 1) {
// console.log(this.flitterData(this.tableData))
const _row = (this.flitterData(this.tableData).two)[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
},
// 获取合并的数组
flitterData(arr) {
let spanOneArr = []
let spanTwoArr = []
let concatOne = 0
let concatTwo = 0
arr.forEach((item, index) => {
console.log(item, index)
if (index === 0) {
spanOneArr.push(1);
spanTwoArr.push(1);
} else {
if (item.billno === arr[index - 1].billno) { //第一列需合并相同内容的判断条件
spanOneArr[concatOne] += 1;
spanOneArr.push(0);
} else {
spanOneArr.push(1);
concatOne = index;
};
if (item.code === arr[index - 1].code && item.billno === arr[index - 1].billno) {//第二列需合并相同内容的判断条件
spanTwoArr[concatTwo] += 1;
spanTwoArr.push(0);
} else {
spanTwoArr.push(1);
concatTwo = index;
};
}
});
return {
one: spanOneArr,
two: spanTwoArr,
}
},