element表格的有滚动条时产生错位或者偏移(记录一下）

原创已于 2024-03-15 09:38:38 修改 · 1k 阅读

11 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#vue.js #前端 #javascript

收录于

于 2024-03-15 09:37:59 首次发布

文章讨论了ElementUI的一个版本变化，即新版el-table不再自动在header中添加gutter占位元素。解决方法是针对滚动轴调整tableheader样式，避免了对新版本兼容性的影响。

可能是element的版本的原因

element官网上 el-table 在header中会生成一个class名为gutter的th元素，并设置宽度为滚动条的宽度进行占位，

但目前使用版本并未生成此元素

手动修改table header样式就可以了

.el-table--scrollable-y {
  .el-table__header-wrapper {
    .el-table__header {
      thead {
        tr {
          &::after {
            content: '';
            width: 8px;
            height: auto;
            display: table-cell;
            background: #f2f2f7;
          }
        }
      }
    }
  }
}