element-table 多级表头固定首行表头首列

效果图：

template代码

 <div class="tableContent">
      <el-table
        :data="tableData"
      >
        <el-table-column label="配送信息" width="120">
          <el-table-column
            prop="date"
            label="姓名"
            width="120">
          </el-table-column>
        </el-table-column>
        <el-table-column label="配送信息1">
          <el-table-column
            prop="name"
            label="姓名"
            width="120">
          </el-table-column>
        </el-table-column>
        <el-table-column label="配送信息3">
          <el-table-column
            prop="city"
            label="姓名"
            width="120">
          </el-table-column>
          </el-table-column>
          <el-table-column label="配送信息4">
            <el-table-column
              prop="address"
              label="姓名"
              width="120">
            </el-table-column>
          </el-table-column>
          <el-table-column label="配送信息5">
            <el-table-column
              prop="zip"
              label="姓名"
              width="120">
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>

样式代码

最外层样式

.tableContent{
    height: 300px;
    width: 400px;
    margin: 50px;
    overflow: auto;
    ......//下方样式代码
    }

其他修改el-table样式代码写在.tableContent中

1、固定首列

/deep/  .el-table td:first-child {
      position:sticky;
      left:0; 
      z-index:1;
      background-color:lightpink;
    }

2左上角的单元格显示优先级最高（可以任意设置你认为合适的数值大小）

/deep/ .el-table th:first-child {
      z-index:999;
    }

3第二行表头第一个单元格在横向优先级最大，纵向优先级小（比左上角单元格优先级小，上下滚动方便被挡住，比右边大，左右滚动可以遮挡其他单元格）

/deep/ .el-table th.is-leaf:first-child{
      z-index: 1;
    }

4、表体内容优先级最小

/deep/  .el-table td {
      z-index:0;
    }

5设置表头吸顶效果（顶到上边框就fixed）

/deep/ .el-table thead tr th {
      position:sticky;
      z-index:2;
      top:0;
    }

6第二行表头优先级较小（方便被左上角遮挡）

/deep/ .el-table th.is-leaf{
      z-index: 0;
    }

7、element-table的表格中，表格自带overflow：auto/hidden，但position:sticky属性要想生效，父元素的overflow属性不可以有auto/hidden/scroll，因此要设置table的overflow属性

/deep/ .el-table__header-wrapper{
      display: inline; //为了跨div实现吸顶
      overflow: visible !important;
    }
    

/deep/ .el-table{
  overflow: visible !important;
}
/deep/ .el-table__body-wrapper{
  overflow: visible;
}
/deep/ .el-table--scrollable-x .el-table__body-wrapper{
  overflow-x: visible;
}

8 因为element-table中，header和body在两个div里，position:sticky在纵向滚动时，无法跨div进行，因此给header设置display:inline

 /deep/ .el-table__header{
      display: inline;
    }

9设置inline后，表头单元格宽度不生效，会导致表头表体错位，因此手动设置单元格宽度

/deep/ .el-table th>.cell{
      width: 119px;
    }