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

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为横向滚动条高度
}

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐