el-table实现合并单行表头并设置背景色

<div style="background-color: black">
<el-table
          class="mytTable"
          :data="tableData"
          border
          :header-cell-class-name="headerClass"
          style="width: 1000px">
        <el-table-column prop="name" label="设备名称" width="180"></el-table-column>
        <el-table-column label="ZY1" align="center">
          <el-table-column prop="content1"></el-table-column>
          <el-table-column prop="content2"></el-table-column>
          <el-table-column prop="content3"></el-table-column>
          <el-table-column prop="content4"></el-table-column>
          <el-table-column prop="content5"></el-table-column>
        </el-table-column>
      </el-table>
</div>

<script setup>
import {ref, onMounted} from 'vue';
const tableData = ref([])

onMounted(() => {
  for (let i = 0; i < 10; i++) {
    let data = {
      name: 'Tom'+i,
      content1: 'No. '+i,
      content2: 'No. '+i,
      content3: 'No. '+i,
      content4: 'No. '+i,
      content5: 'No. '+i,
    }
    tableData.value.push(data)
  }
});

function headerClass(row) {
  if (row.rowIndex === 1) {
    return 'header-row-display';
  }
}
</script>

<style scoped>
.mytTable{
  background-color: transparent !important;
}

.mytTable ::v-deep .el-table th.el-table__cell, ::v-deep .el-table th, ::v-deep .el-table tr{
  color: white;
  background-color: transparent !important;
}

/*鼠标移入某行时的背景色*/
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: black;
}
/*设置单元格不可见*/
/deep/ .header-row-display {
  display: none;
}
</style>

效果如下图

如果不加鼠标移入某行时的背景色的样式，鼠标放在表格上面会是默认的高亮颜色，这个可以根据自己的背景色去设置高亮颜色

合并行后实际上会有第二行子表头（如下图所示），这里header-row-display样式设置子表头不可见，就实现了单行合并

原文地址：https://blog.csdn.net/weixin_44758923/article/details/140666917

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！