怎么做？

先说解决办法，在设置滚动条宽高后，将下面也修改为相同宽高即可

 .el-scrollbar__wrap::-webkit-scrollbar {
   width: 20px; 
   height: 20px; 
 }

为什么？

在将默认滚动条高度改为20px时，发现左右出现错位，高度越高错位越多，说明可能中间与错位的两侧不是一体

  .el-table__body-wrapper::-webkit-scrollbar {
     width: 20px; 
     height: 20px; 
   }

F12发现表格真的是由三个部分组成

 分别为中左右，el-table__fixed与el-table__fixed-right是浮动在中间el-table__fixed-body-wrapper之上的，而el-table__fixed-body-wrapper才是真正数据表格

el-table__fixed

el-table__fixed-body-wrapper

el-table__fixed-right

 

而滚动条是el-table__fixed-body-wrapper生成的滚动条，el-table__fixed与el-table__fixed-right是浮动预留了滚动条的位置（滚动条大小与预留位置相同才能实现不错位），实现整体表格的样式，在修改了滚动条的高度、宽度后，预留位置大小未变造成错位现象，那么我们就需要修改预留位置大小即可，

经过一顿操作，终于找到了el-table__fixed-right-patch这个属性，这是右侧预留位置的class

那我们在elementUI源码中去寻找，打开node_modules找到node_modules\element-ui\packages\table\src\table.vue

搜索发现

 v-if="rightFixedColumns.length > 0"

 class="el-table__fixed-right-patch"

 ref="rightFixedPatch"

 :style="{

   width: layout.scrollY ? layout.gutterWidth + 'px' : '0',

   height: layout.headerHeight + 'px'

 与layout有关，继续查找

const layout = new TableLayout({
  store: this.store,
  table: this,
  fit: this.fit,
  showHeader: this.showHeader
});

一路向下搜索找到，最终找到

node_modules\element-ui\src\utils\scrollbar-width.js

import Vue from 'vue';

let scrollBarWidth;

export default function() {
  if (Vue.prototype.$isServer) return 0;
  if (scrollBarWidth !== undefined) return scrollBarWidth;

  const outer = document.createElement('div');
  outer.className = 'el-scrollbar__wrap';
  outer.style.visibility = 'hidden';
  outer.style.width = '100px';
  outer.style.position = 'absolute';
  outer.style.top = '-9999px';
  document.body.appendChild(outer);

  const widthNoScroll = outer.offsetWidth;
  outer.style.overflow = 'scroll';

  const inner = document.createElement('div');
  inner.style.width = '100%';
  outer.appendChild(inner);

  const widthWithScroll = inner.offsetWidth;
  outer.parentNode.removeChild(outer);
  scrollBarWidth = widthNoScroll - widthWithScroll;

  return scrollBarWidth;
};

 正是这个js输出的预留位置大小，class为el-scrollbar__wrap的元素的掌控预留位置

原理就是el-scrollbar__wrap这个outer减去innner大小计算得出滚动条（预留位置）的大小，那么我们在页面中直接设置el-scrollbar__wrap的滚动条大小，即预留位置大小

我们在设置table表的滚动条大小后，也需要将el-scrollbar__wrap的滚动条大小设置为相同大小，那么预留位置就等于滚动条大小，解决错位问题

 .el-table__body-wrapper::-webkit-scrollbar {
   width: 20px; 
   height: 20px; 
 }
 .el-scrollbar__wrap::-webkit-scrollbar {
   width: 20px; 
   height: 20px; 
 }