效果:
<el-table
:data="tableData"
:span-method="arraySpanMethod"
:header-cell-style="headerStyle"
border
style="width: 100%"
>
<el-table-column prop="id" label="单位" width="100"> </el-table-column>
<el-table-column prop="name" label="单位" width="100"> </el-table-column>
<el-table-column prop="amount1" sortable label="数值 1">
</el-table-column>
<el-table-column prop="amount2" sortable label="数值 2">
</el-table-column>
<el-table-column prop="amount3" sortable label="数值 3">
</el-table-column>
</el-table>
js
headerStyle({ row, column, rowIndex, columnIndex }) {
//合并表头的两个 '单位'
if (rowIndex === 0) {
if (columnIndex === 0) {
this.$nextTick(() => {
if (document.getElementsByClassName(column.id).length !== 0) {
document
.getElementsByClassName(column.id)[0]
.setAttribute("colSpan", 2);
}
});
}
if (columnIndex === 1) {
this.$nextTick(() => {
if (document.getElementsByClassName(column.id).length !== 0) {
document
.getElementsByClassName(column.id)[0]
.setAttribute("colSpan", 0);
document
.getElementsByClassName(column.id)[0]
.setAttribute("rowspan", 0);
}
});
return { display: "none" };
}
}
},