2023年6月20日发(作者：)

关于修改默认滚动条⼤⼩后，造成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__fixedel-table__fixed-body-wrapperel-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_搜索发现 v-if=" > 0" class="el-table__fixed-right-patch" ref="rightFixedPatch" :style="{ width: Y ? Width + 'px' : '0', height: Height + 'px' 与layout有关，继续查找const layout = new TableLayout({ store: , table: this, fit: , showHeader: ader});⼀路向下搜索找到，最终找到node_rt Vue from 'vue';let scrollBarWidth;export default function() { if (ype.$isServer) return 0; if (scrollBarWidth !== undefined) return scrollBarWidth; const outer = Element('div'); ame = 'el-scrollbar__wrap'; lity = 'hidden'; = '100px'; on = 'absolute'; = '-9999px'; Child(outer); const widthNoScroll = Width; ow = 'scroll'; const inner = Element('div'); = '100%'; Child(inner); const widthWithScroll = Width; Child(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;

}

2023年6月20日发(作者：)

关于修改默认滚动条⼤⼩后，造成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__fixedel-table__fixed-body-wrapperel-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_搜索发现 v-if=" > 0" class="el-table__fixed-right-patch" ref="rightFixedPatch" :style="{ width: Y ? Width + 'px' : '0', height: Height + 'px' 与layout有关，继续查找const layout = new TableLayout({ store: , table: this, fit: , showHeader: ader});⼀路向下搜索找到，最终找到node_rt Vue from 'vue';let scrollBarWidth;export default function() { if (ype.$isServer) return 0; if (scrollBarWidth !== undefined) return scrollBarWidth; const outer = Element('div'); ame = 'el-scrollbar__wrap'; lity = 'hidden'; = '100px'; on = 'absolute'; = '-9999px'; Child(outer); const widthNoScroll = Width; ow = 'scroll'; const inner = Element('div'); = '100%'; Child(inner); const widthWithScroll = Width; Child(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;

}