首页 前端知识 Element-UI,el-table表头列错位问题解决(出现滚动条及使用fixed列)

Element-UI,el-table表头列错位问题解决(出现滚动条及使用fixed列)

2024-05-20 14:05:07 前端知识 前端哥 994 583 我要收藏

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

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8955.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!