vue使用elementUI,在自定义滚动条时,table固定列与滚动条有间隙,怎么解决好?

vue使用elementUI,在自定义滚动条时,table固定列与滚动条有间隙。
刚开始直接覆盖table的“el-table__fixed”属性来达到去掉间隙,但是界面是动态适应的,即高度并不是固定的,该怎么解决?
clipboard.png

回答:

其实你只需要覆盖一下样式即可修复

.el-table__fixed,
.el-table__fixed-right {
  height: 100% !important;
}

回答:

没用过这个组件,但是你可以试试min-height限制行高。

回答:

在mounted出监听

mounted() {
  window.onresize = () => {
    return (() => {
      window.screenWidth = document.body.clientWidth
      this.tableHeight = window.innerHeight - 165
      if (this.widowHeight !== window.innerHeight) {
        this.handleSuitTableHigh()
      }
    })()
  }
  setTimeout(() => {
    this.handleSuitTableHigh()
  }, 1000)
}
// 处理table固定高度
  handleSuitTableHigh() {
    this.widowHeight = window.innerHeight
    const tables = document.getElementsByClassName('el-table__fixed')
    for (const item of tables) {
      setTimeout(() => {
        item.style.height = parseInt(item.style.height) + 7 + 'px'
      }, 100)
      const wrappers = item.getElementsByClassName('el-table__fixed-body-wrapper')
      for (const wrap of wrappers) {
        setTimeout(() => {
          wrap.style.height = parseInt(wrap.style.height) + 7 + 'px'
        }, 100)
      }
    }
  },

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注