关于修改默认滚动条⼤⼩后，造成el-table表格错位的问题的
解析
怎么做？
先说解决办法，在设置滚动条⼤⼩后，将下⾯也修改为相同⼤⼩即可
.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
element表格横向滚动条⽽滚动条是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 = ateElement('div');
outer.className = 'el-scrollbar__wrap';
outer.style.visibility = 'hidden';
outer.style.width = '100px';
outer.style.position = 'absolute';
p = '-9999px';
document.body.appendChild(outer);
const widthNoScroll = outer.offsetWidth;
outer.style.overflow = 'scroll';
const inner = ateElement('div');
inner.style.width = '100%';
outer.appendChild(inner);
const widthWithScroll = inner.offsetWidth;
veChild(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: 20 px;
height: 20px;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。