element-ui 组件el-table 更改滚动轴样式出现间隙空白

空白间隙是由于el-table组件预留的滚动条宽度、高度导致的。

获取滚动条宽度源代码：

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;
};

通过创建一个实际的元素计算出滚动条的宽度。

只要可以在项目中给classel-scrollbar__wrap增加样式

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