效果图如下:
表格代码如下:
<el-table
width="100%"
ref="tableRef"
style="margin-bottom: 15px;"
:data="jlData"
class="tableHeader6"
header-row-class-name="headerStyleTr6"
:row-class-name="tableRowClassName"
show-summary
:span-method="arraySpanMethod"
>
<el-table-column prop="staff_name" label="姓名"></el-table-column>
<el-table-column prop="staff_id" label="工号"></el-table-column>
<el-table-column prop="syjlTotal" label="使用量"></el-table-column>
<el-table-column min-width="125px" prop="xzjlTotal" label="处理报告下载量"></el-table-column>
<el-table-column min-width="125px" prop="cxbgTotal" label="撤销报告下载量"></el-table-column>
<el-table-column min-width="110px" prop="lyTotal" label="录音下载量"></el-table-column>
</el-table>
const arraySpanMethod = ({ row, column, rowIndex, columnIndex }:any)=> {
nextTick(()=>{
if(tableRef.value.$el){
let current = tableRef.value.$el.querySelector(".el-table__footer-wrapper").querySelector(".el-table__footer")
// cell[0].innerHTML = '合计数' 修改文本
let cell = current.rows[0].cells
cell[0].style.textAlign = "center"; // 合计行第一列字段居中显示。
cell[1].style.display = "none"; // 隐藏被合并的单元格,不隐藏的话还会占着位置。
cell[0].colSpan = "2"; // 合并单元格个数
console.log(cell,'cell')
//修改单元格的样式
for(let i=0;i<cell.length;i++){
console.log(cell[i])
if(i==0){
cell[i].style.color = 'red'
}else{
cell[i].style.color = 'orange'
}
}
}
})
}