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

青莳吖2024-07-29 11:42

复制代码

<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样式设置子表头不可见，就实现了单行合并