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

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

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)
    })
  }
}复制

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

在App.vue加入全局样式：

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