效果图(实际效果图内含隐私信息,故只展现excel表,与效果图样式一致):
代码:
<el-table
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">
<!-- <el-table-column
label="报表"
align="center"
min-width="150"> -->
<el-table-column
label="月份"
align="center"
min-width="380">
<el-table-column
prop="category"
min-width="120">
</el-table-column>
<el-table-column
prop="type"
min-width="260">
</el-table-column>
</el-table-column>
</el-table>
合并表头方法:
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 }
},
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了