Effect:

The template code

<div class="tableContent"> <el-table :data="tableData" > <el-table-column label=" distribution information "width="120"> <el-table-column Prop ="date" label=" name "width="120"> </el-table-column> </el-table-column> <el-table-column > <el-table-column label=" Distribution info 1"> <el-table-column prop="name" label=" name" width="120"> </el-table-column> </el-table-column> <el-table-column <el-table-column prop="city" > </el-table-column> </el-table-column> <el-table-column prop="address" label=" name "width="120"> </el-table-column> </el-table-column> <el-table-column label=" distribution information 5"> <el-table-column prop="zip" label=" name "width="120"> </el-table-column> </el-table-column> </el-table> </div>Copy the code

Style code

Outermost style

.tableContent{ height: 300px; width: 400px; margin: 50px; overflow: auto; . // Style code below}Copy the code

Other modifications to the el-Table style code are written in. TableContent

1. Fix the first column

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

Copy the code

2 The cell in the upper left corner shows the highest priority (you can set the value size as you see fit)

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

3. The first cell in the table head of the second row has the highest priority in the horizontal direction and the lowest priority in the vertical direction (lower priority than the cell in the upper left corner, which is easy to block when scrolling up and down; larger than the cell on the right, which can block other cells when scrolling left and right)

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

Copy the code

4. The table body content has the lowest priority

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

5 set the top effect of the table (top to the top frame will be fixed)

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

6 The second row has a lower priority in the header (easily obscured by the upper left corner)

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

Elementary-table (); overflow (); Auto /hidden, but if the position:sticky attribute is to take effect, the overflow attribute of the parent element cannot have auto/hidden/scroll, so set the overflow attribute of the table

/deep/ .el-table__header-wrapper{ display: inline; // To implement overflow: visible! important; }Copy the code
/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; }Copy the code

8 In elemental-table, header and body are in two divs, position:sticky cannot be rolled across divs vertically, so set header to display:inline

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

9 After the parameter is set to inline, the width of the header cell does not take effect. As a result, the header body is misaligned

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