合并效果如图
<Table border :columns='gridOption1.columns' :data='gridOption1.data' height='600px' :span-method='handleSpan'> </Table>
handleSpan({ row, column, rowIndex, columnIndex }) {
const mergeSpan = key => {
let rowCount = 1;
for (let i = rowIndex + 1; i < this.gridOption1.data.length; i++) {
if (!this.gridOption1.data[i][key]) {
rowCount++;
} else {
break;
}
}
return [rowCount, 1];
};
// 人群类型合并
if (columnIndex === 1 && row['crowdType']) {
return mergeSpan('crowdType');
} else if (columnIndex === 1) {
return [0, 0];
}
// 投放人群
if (columnIndex === 2 && row['crowdLaunchChannel']) {
return mergeSpan('crowdLaunchChannel');
} else if (columnIndex === 2) {
return [0, 0];
}
// 预计开始投放时间
if (columnIndex === 4 && row['crowdLaunchDate']) {
return mergeSpan('crowdLaunchDate');
} else if (columnIndex === 4) {
return [0, 0];
}
},
如果是合并的行 ,则每个合并的行,else if 必须 return [0,0] ,标识当前 后面的单元格不占用空间,否则 单元格会错乱