Element-UI，el-table表头列错位问题解决（出现滚动条及使用fixed列）

前端晚自习

已于 2024-06-03 15:56:34 修改

阅读量7.4k

点赞数 12

分类专栏：前端文章标签： vue.js javascript elementui

于 2023-11-23 11:09:09 首次发布

本文链接：https://blog.youkuaiyun.com/weican57/article/details/134572508

版权

前端专栏收录该内容

6 篇文章

订阅专栏

文章介绍了如何修复Vue表格在竖向滚动条拉至最右边或横向滚动条拉至最底部时，由于滚动条影响导致的表头错位问题，通过设置动态宽度和全局样式进行调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、因竖向滚动条导致表头错位问题解决（滚动条拉到最右边时出现）

watch: {
  // dataList为table的数据对象data
  dataList() {
    // 解决横向滚动时，列没对齐的问题
    this.$nextTick(() => {
      setTimeout(() => {
        let lastColEl = document.querySelector('.el-table__header colgroup col:last-child')
        if (lastColEl) {
          // 最后一列的宽度加上滚动条的宽度
          lastColEl.width = Number(lastColEl.width) + 6 // 6为滚动条宽度
        }
      }, 1000)
    })
  }
}

或者用全局样式：

.el-table--scrollable-y .el-table__body-wrapper.is-scrolling-right {
  width: calc(100% + 6px); // 6px为竖向滚动条宽度
}

二、使用fixed固定列导致表头错位问题解决（滚动条拉到最底部时出现）

在App.vue加入全局样式：

.el-table__fixed-body-wrapper .el-table__body {
  padding-bottom: 6px; // 6px为横向滚动条高度
}