效果图(实际效果图内含隐私信息,故只展现excel表,与效果图样式一致):
代码:
v-if="isShow" :data="tableData" stripe size="small" row-key="index" height="1000" :header-cell-style="rowClass" :span-method="objectSpanMethod" style="width: 100%; margin: 20px 0px"> label="月份" align="center" min-width="380"> prop="category" min-width="120"> prop="type" min-width="260">
合并表头方法:
rowClass({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 0 && columnIndex === 0) {
this.$nextTick(() => {
if (document.getElementsByClassName(column.id).length !== 0) {
document.getElementsByClassName(column.id)[0].setAttribute('rowSpan', 2)
return false
}
})
}
if (rowIndex === 1 && (columnIndex === 0 || columnIndex === 1)) {
return { display: 'none' }
}
},
单元格行合并方法:
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex === 0 || row.category !== this.tableData[rowIndex - 1].category) {
const rowCount = this.tableData.filter(i => i.category === row.category).length
return { rowspan: rowCount, colspan: 1 }
} else {
return { rowspan: 0, colspan: 0 }
}
}
return { rowspan: 1, colspan: 1 }
},