公司现在使用vue+elementUI,在使用表格的时候会出现合并单元格的问题,可以通过表格提供的span-method进行单元格合并,但是它只能对表格的数据内容起作用,对表头不起作用(或许是我自己没有深入学习到span-method或者是没有深入了解表格的每个属性、方法),所以在网上找了方法都没有找到横向合并表头的方法,所以自己就用了一个非常笨的方法去合并。
合并前表格内容如下:
<el-table :data="tableData" v-loading="loading" stripe :max-height="maxHeight" id="out-table" :span-method="objectSpanMethod">
<el-table-column label="业务" align="center" rowspan="3">
<el-table-column prop="businessDepartment" width="100" align="center">
</el-table-column>
<el-table-column prop="department" width="120" align="center">
</el-table-column>
</el-table-column>
<el-table-column label="累计" align="center">
<el-table-column width="120" prop="" label="问题" align="center">
</el-table-column>
<el-table-column width="120" prop="" label="未到期" align="center">
</el-table-column>
</el-table-column>
</el-table>
现在要求表头字段业务要单独一个单元格,也就是说下面的俩个单元格是没有的,业务字段要单独合并为一整个单元格,实现方法在表格中添加header-cell-style,通过设置表格样式进行单元格合并。
html代码
<el-table :data="tableData" v-loading="loading" stripe :max-height="maxHeight" id="out-table" :span-method="objectSpanMethod"
:header-cell-style="dois">
<el-table-column label="业务" align="center" rowspan="3">
<el-table-column prop="businessDepartment" width="100" align="center">
</el-table-column>
<el-table-column prop="department" width="120" align="center">
</el-table-column>
</el-table-column>
<el-table-column label="累计" align="center">
<el-table-column width="120" prop="" label="问题" align="center">
</el-table-column>
<el-table-column width="120" prop="" label="未到期" align="center">
</el-table-column>
</el-table-column>
</el-table>
js方法:
dois({
row,
column,
rowIndex,
columnIndex
}){
if(rowIndex === 0){
if(columnIndex === 0){
if(document.getElementsByClassName(column.id).length !== 0){
var _c = document.getElementsByClassName(column.id)
document.getElementsByClassName(column.id)[0].setAttribute("rowSpan",3)
console.log(_c[0].getAttribute("rowSpan"))
}
return column
}
}
if(rowIndex === 1){
if(columnIndex === 0 || (columnIndex === 1)){
return {display:"none"}
}
}
},