当前位置:   article > 正文

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

el-table错列

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

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

或者用全局样式:

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

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

在App.vue加入全局样式:

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

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号