Vue2+ElementUI el-table固定列遮挡滚动条及错位修复方案

解决方案

本方案针对最右侧固定列，对应的CSS类名为.el-table__fixed-right；若存在左侧固定列，请自行替换为el-table__fixed。

防止固定列表格高度错位

  .el-table__fixed-body-wrapper {
    .el-table__body {
      padding-bottom: 15px; // 这个得自己调试看多少合适
    }
  }
}

若错位问题仍未解决，请检查el-table__body-wrapper是否自定义了max-height样式属性，该属性会干扰固定列的定位计算。

在解决固定列错位后，需将固定列向上移动一个滚动条的高度，以消除对滚动条的遮挡影响。

  .el-table__fixed-right {
    height: auto !important;
    bottom: 8px !important;// 这个得自己调试看多少合适
  }
   //去掉固定列下方的横线， 样式优化
  .el-table__fixed::before, .el-table__fixed-right::before {
    display: none;
  }

修复效果如图所示：

表格预留了相应高度且保持一致，未出现错位现象，问题已得到完美解决。

至此，关于Vue2+ElementUI中el-table固定列遮挡横向滚动条及错位的文章介绍完毕。如需了解更多相关vue2与elementui固定列内容，请搜索本站历史文章或继续阅读后续相关文章，感谢大家的支持。