element-ui Table 表格自定义滚动条和fixed时表格错位的解决方案

问题描述：

在项目中遇到需要自定义滚动条样式和fixed表格滚动错位时遇到的问题。
例如：下方滚动表格产生错位

用了this.$refs.table.doLayout();等方法解决都没有用发现是自定义滚动条的问题。

解决方法：

给 表格设置 自定义滚动条 并注意：.el-table__body-wrapper::-webkit-scrollbar 的宽高。
详细代码如下：

// ----------修改elementui表格的默认样式-----------
.el-table__body-wrapper {
  &::-webkit-scrollbar-track {
    background-color: #fff;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #ccc;
  }
  &::-webkit-scrollbar-thumb:hover {
    background-color: #409eff;
  }
}
//自定义表格滚动条
.el-table__body-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
// 滚动条样式
.el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #d4d5d8;
  border-radius: 5px;
}

//主要是靠这个 注意 
//上面.el-table__body-wrapper::-webkit-scrollbar 是 多少px 下面这个也要 多少px
.el-scrollbar__wrap::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}