问题出现
在使用 el-table 中，在使用 fixed 字段固定列后，当我们自定义表格的滚动条的宽高后，会出现底部高度不对齐，右侧列宽不对齐等情况。
上图可以看到，当我们滚动到底部后，会出现明显的错位现象。此时，第一时间就去 F12 查看元素，企图重载样式。但是始终无所收获。
解决方案
其实，只要在重载对应的 .el-scrollbar__wrap::-webkit-scrollbar 样式即可：
.el-table__body-wrapper::-webkit-scrollbar {
height: 10px;
}
.el-scrollbar__wrap::-webkit-scrollbar {
width: 10px;
height: 10px;
}此时，刷新页面，再看效果：
已经根据自定义高度正常展示了。
原因解读
我们知道，el-table 比较复杂，尤其是当我们用了 fixed 属性后，通过 F12 查看元素就可知，其通过构造多个不同配置的表格，通过 js 实现表格之间滚动的联动效果。
其中，这个滚动条是中间滚动内容的，左右的固定列应该把这个位置让出来（同理，右侧的滚动条，在表格和表头之间也有这个问题）。让出来多少呢？计算一下滚动条高度即可，然后通过 js 直接写到表格的样式里面即可。
但是，大小怎么计算呢？在我之前写的 @xpyjs/gantt 组件中，也有这个问题。我通过一种比较取巧的方式，左侧表格高度 - 右侧甘特区高度 = 滚动条高度，通过这样的方式，可以准确判断出当前差值是多少，甚至可以"预判"用户自定义滚动条的高度。
但是的但是，el-table 并没有这样实现，至少它没有像我那样准确的方式。而是使用了比较通用的方式：通过创建元素、计算滚动条高度、再删除元素的方式得到滚动条的宽高：
let scrollBarWidth;
export default function() {
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;
}文件路径：
element-ui/src/utils/scrollbar-width.js
有了这样的原因，我们就可以知道，它在内部自动计算了滚动条的宽高。也就是说，我们单单修改 el-table 的滚动条样式，只会改变表格当前的滚动条的高度，而不会改变这个预留出来的间隙高度，所以我们要动态改变这个元素的滚动条的宽高，于是就有了我们改变 .el-scrollbar__wrap::-webkit-scrollbar 的方式。
切记，这个改变需要改变的是全局的。也就是说，如果你的项目中有多个表格，你不可以单独给某一个表格的滚动条重置宽高。因为，fixed 列的高度是在内部计算死的，用了统一的 scrollBarWidth 值，所以，这个方法只能做到统一修改。
另外，还要记得，这个方法要全局生效~
文章评论