拆分的效果是合并的逆向思维,处理数据后进行合并单元格
1. 处理数据
list.forEach((el, index) => {
el.bidApplyRelList.forEach((item, iinedx) => {
tableData.data.push({
...el,
supplierName: item.supplierName,
finalOffer: item.finalOffer,
colspannum: iinedx === 0 ? el.bidApplyRelList.length : 0,
rowindex: index + 1,
});
});
});
2. 模板 span-method 属性
<el-table
size="mini"
ref="multipleTable"
:data="tableData.data"
tooltip-effect="dark"
border
v-loading="tableData.loading"
@selection-change="handleSelection"
:span-method="objectSpanMethod"
></el-table>
3. 合并1-8列单元格,9-10列就是拆分单元格的效果
/**
* 拆分单元格
*/
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex !== 9 && columnIndex !== 10) {
return {
rowspan: row.colspannum,
colspan: 1,
};
}
},