el-table为每一行添加自定义标题

在这里插入图片描述

  • 为表格添加自定义行类名、自定义单元格的类名

row-class-name=“home-service-work-no-row”
cell-class-name=“home-service-work-no-cell”

<el-table
  ref="ty-table"
  row-class-name="home-service-work-no-row"
  cell-class-name="home-service-work-no-cell"
  :data="tableData"
></el-table>
  • 设置样式
  • table-row-title就是你的自定义标题的容器类名
<style scoped lang="scss">
:deep(.el-table__body) {
    
    
  border-spacing: 0 10px; // 修改表格行间距
  .home-service-work-no-row {
    
    
    position: relative; // 以为row作为基准定位
    .home-service-work-no-cell {
    
    
      position: static; // 覆盖原来的relative样式,让table-row-title以为row作为基准定位
      padding-top: 50px;
      // 自定义标题
      .table-row-title {
    
    
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: 999;
      }
    }
  }
}
</style>