el-table 滚动条（固定列）问题问题一：显示滚动条。默认是不显示滚动条的，我们需要设置一下滚动条样式 ::-we

当前的需求时表格里最后一列是冻结的情况，如果还想默认直接展示滚动条。

问题一：表格滚动。

使用el-table自带的max-height:'200'属性，当然height也可以动态计算。

问题二：显示滚动条。

默认是不显示滚动条的，我们需要设置一下滚动条样式 ::-webkit-scrollbar 滚动条就出来了。

给table的父盒子加个class="table"
.table {
    padding: 20px;
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
      width: 6px; // 横向滚动条
      height: 6px; // 纵向滚动条
    }
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
      background-color: #dde;
      border-radius: 3px;
    }
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track{
      background: white;
      border-radius:2px;
    }
  }

问题三：滚动条占据了盒子的空间。

当滚动条出来之后滚动条占据了盒子的宽高会挤压表格导致最后一行或者右侧一列挤压表格样式。设置overflow: overlay;使滚动条悬浮起来。

.table {
    padding: 20px;
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
      width: 6px; // 横向滚动条
      height: 6px; // 纵向滚动条
    }
    ::v-deep  .el-table__body-wrapper{
      overflow: overlay;
    }
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
      background-color: #dde;
      border-radius: 3px;
    }
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track{
      background: white;
      border-radius:2px;
    }
  }

如果您的没有固定列到这里问题应该都已经解决了但是如果有固定列固定列是浮动起来的会遮挡滚动条，那该怎么办呢？那就挪动固定列。

问题四：纵向滚动条看不见。

右侧有固定列，导致纵向滚动条被遮挡住了，想法就是对固定列的盒子进行挪动因为滚动条的宽度是6px 那就把固定列向左移动6px.同理固定列的底部也遮挡了滚动条那也往上移动6px;

.table {
    padding: 20px;
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
      width: 6px; // 横向滚动条
      height: 6px; // 纵向滚动条
    }
    ::v-deep  .el-table__body-wrapper{
      overflow: overlay;
    }
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
      background-color: #dde;
      border-radius: 3px;
    }
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track{
      background: white;
      border-radius:2px;
    }
    ::v-deep .el-table__fixed-right{
      right:6px!important;
      bottom: 6px!important;
    }
  }

问题五：表头左右移动固定列右侧有个6px的间隙表头滚动的时候会看的见其他表头。

那就补盒子定位补盒子，把盒子补到这个间隙里。在table父盒子下新增子盒子class="supplement" （因为表头都有底部边框，补的盒子也得有）。

.table {
    padding: 20px;
    position: relative;
    .supplement{
      position: absolute;
      top: 20px;
      right: 19.5px;
      z-index: 10;
      width: 7px;
      height: 54px;
      box-sizing: border-box;
      background: #FAFAFA;
      border-bottom: 1px solid #dfe6ec;
    }
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
      width: 6px; // 横向滚动条
      height: 6px; // 纵向滚动条 必写
    }
    ::v-deep  .el-table__body-wrapper{
      overflow: overlay
    }
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
      background-color: #dde;
      border-radius: 3px;
    }
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track{
      background: white;
      border-radius:2px;
    }
    ::v-deep .el-table__fixed-right{
      right:6px!important;
      bottom: 6px!important;
    }
  }

问题六：当页面左右不滚动的时候，固定列最后一行有条线。

其实这个时候已经很完美了但是当页面不左右滚动的时候也就是底部没横向滚动条了，但是当页面滚动到最底部的时候会有一条线。

.table {
    padding: 20px;
    position: relative;
    .supplement{
      position: absolute;
      top: 20px;
      right: 19.5px;
      z-index: 10;
      width: 7px;
      height: 54px;
      box-sizing: border-box;
      background: #FAFAFA;
      border-bottom: 1px solid #dfe6ec;
    }
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
      width: 6px; // 横向滚动条
      height: 6px; // 纵向滚动条 必写
    }
    ::v-deep  .el-table__body-wrapper{
      overflow: overlay
    }
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
      background-color: #dde;
      border-radius: 3px;
    }
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track{
      background: white;
      border-radius:2px;
    }
    // 问题六
    ::v-deep .el-table__fixed-right::before{
      background: #FFFFFF!important;
    }
    ::v-deep .el-table__fixed-right{
      right:6px!important;
      bottom: 6px!important;
    }
  }

el-table 滚动条（固定列）问题