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

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

监听table的数据对象data：

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 .el-table__fixed-right .el-table__fixed-body-wrapper .el-table__body {  
padding-bottom: 12px!important;  
}

//解决横向滚动条错位 
.el-table.systemMangeTable .el-table__body-wrapper.is-scrolling-right{  
width: calc(100% + 12px)!important;  
}