el-table fixed固定列纵向滚动条和表格错位

### 解决 Element-UI `el-table` 固定列与纵向滚动条导致的表格错位问题 对于 `el-table` 组件中的固定列和纵向滚动条组合使用时可能出现的表头错位现象，可以通过调整 CSS 和 JavaScript 来解决问题。 #### 方法一：CSS 方案 通过修改 `.el-table--scrollable-y .el-table__body-wrapper.is-scrolling-right` 的宽度来适应滚动条的存在。具体做法是在项目中加入如下全局样式： ```css /* 增加额外空间以容纳垂直滚动条 */ .el-table--scrollable-y .el-table__body-wrapper.is-scrolling-right { width: calc(100% + 6px); /* 6px 是竖向滚动条的大致宽度 */ } ``` 此方法适用于大多数场景下的简单修正[^1]。 #### 方法二：JavaScript 动态处理 当页面加载完毕或数据更新后调用 `doLayout()` 函数可以强制刷新表格布局，从而避免由于 DOM 变化引起的渲染错误。可以在组件内定义一个初始化函数，在获取到最新数据显示之前执行该命令： ```javascript init() { const _self = this; this.$nextTick(() => { setTimeout(() => { // 'tableref' 应替换为你实际给 el-table 设置的 ref 属性值 _self.$refs.tableref.doLayout(); }, 100); }); } ``` 这种方法能够有效应对动态变化的数据集带来的潜在错位风险[^4]。 #### 特殊情况——右侧行动栏固定 如果存在最右边固定的行动栏，则可能还需要特别针对`.el-table__fixed-right` 进行优化设置，防止其覆盖水平方向上的滚动条: ```css /* 避免右侧固定列遮挡横向滚动条 */ .el-table__fixed-right::before { content: ""; height: 100%; position: absolute; top: 0; right: -17px; /* 根据实际情况微调这个数值 */ pointer-events: none; } ``` 以上措施综合应用通常能较好地解决因固定列配合纵向滚动条而引发的各种视觉异常状况[^3]。