修复修改了el-table组件的滚动条样式后出现的问题

问题描述：

众所周知， el-table的滚动条使用的是原生的滚动条，样式比较丑，于是本人就擅自改动了一下滚动条样式，理想中的样子是这样的

 但是实际是这样的，

 出现了显示不全，固定列离滚动条距离加宽的问题

下面是我修改滚动条用的样式

/deep/.el-table__body-wrapper {
    &::-webkit-scrollbar {
      height: 6px;
      width: 6px;
    }
    &::-webkit-scrollbar-track {
      background-color: #fff;
    }
    &::-webkit-scrollbar-thumb {
      background-color: #ccc;
    }
    &::-webkit-scrollbar-thumb:hover {
      background-color: #409eff;
    }
}

解决问题

因为默认的固定列偏移的位置刚好是原生滚动条的宽度，所以主要是通过修改一下偏移量去解决问题

下面的样式是完整样式，也可以叫做修改elementui的表格滚动条样式

// ----------修改elementui表格的默认样式-----------
.el-table__body-wrapper {
  &::-webkit-scrollbar {
    height: 6px;
    width: 6px;
  }
  &::-webkit-scrollbar-track {
    background-color: #fff;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #ccc;
  }
  &::-webkit-scrollbar-thumb:hover {
    background-color: #409eff;
  }
}

// 解决表格固定列问题

// 不同尺寸表格修改固定列内容区的高度,  本人这里只罗列了mini与small尺寸的
.el-table--mini {
  .el-table__fixed,
  .el-table__fixed-right {
    .el-table__fixed-body-wrapper {
      // mini表格, 表头高度为36px, 所以这里减36
      height: calc(100% - 36px) !important;
    }
  }
}
.el-table--small {
  .el-table__fixed,
  .el-table__fixed-right {
    .el-table__fixed-body-wrapper {
      // small表格
      height: calc(100% - 40px) !important;
    }
  }
}
.el-table__fixed, .el-table__fixed-right {
  height: calc(100% - 6px) !important;
}
// 当表格没有滚动条时
.el-table__body-wrapper.is-scrolling-none~.el-table__fixed-right{
  height: 100% !important;
  bottom: 0 !important;
  box-shadow: none !important;
}
// 当表格有纵向滚动条时
.el-table--scrollable-y .el-table__fixed-right{
  right: 7px !important;
}
// 当表格只有横向滚动条，没有纵向滚动条时
.el-table--scrollable-x:not(.el-table--scrollable-y) .el-table__fixed-right{
  right: 0 !important;
}

效果