elementui的表格的滚动条的出现导致表格位置错乱-创新互联

分为两种情况，为滚动条出现，和滚动条隐藏 滚动条出现的情况

先获取浏览器滚动条的宽度

创新互联公司专业为企业提供嘉定网站建设、嘉定做网站、嘉定网站设计、嘉定网站制作等企业网站建设、网页设计与制作、嘉定企业网站模板建站服务，十余年嘉定做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

export function findDimensions():{winWidth: Number, winHeight: Number} {let winWidth: Number, winHeight: Number
  // 获取窗口宽度
  if (window.innerWidth) {winWidth = window.innerWidth } else if ((document.body) && (document.body.clientWidth)) {winWidth = document.body.clientWidth }
  // 获取窗口高度
  if (window.innerHeight) {winHeight = window.innerHeight } else if ((document.body) && (document.body.clientHeight)) {winHeight = document.body.clientHeight }
  // 通过深入Document内部对body进行检测，获取窗口大小
  if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {winHeight = document.documentElement.clientHeight
    winWidth = document.documentElement.clientWidth
  }
  return {winWidth,
    winHeight
  }
}

再调用详情接口中调用

getTableHeight() {  this.$nextTick((res) =>{const allHeight = document.querySelector('.rightConter').offsetHeight
        document.querySelector('.el-table__header').style.paddingRight = getScrollbarWidth() + 'px'
      })
    },

滚动条没有出现

在调用详情页的接口中使用

hasTableSrocllp() {  // const srollHeight = this.$refs.chatListRef.bodyWrapper
      this.$nextTick((res) =>{// this.$refs.chatListRef.bodyWrapper.scrollTop = this.$refs.chatListRef.bodyWrapper.scrollHeight
        this.$refs.chatListRef.bodyWrapper.scrollTop = 100
        // 先让滚动条滚动
        if (this.$refs.chatListRef.bodyWrapper.scrollTop >0) {  // 判断滚动条是否发生了滚动
          this.tableSrocll = true
          // el-table__body
          // document.querySelector('.el-table__body').style.paddingRight = 0 + 'px'
          console.log('有滚动条')
        } else {  // 没有滚动
          this.tableSrocll = false
          document.querySelector('.el-table__body').style.paddingRight = getScrollbarWidth() + 'px'
        }
        // 恢复滚动条到顶部
        this.$refs.chatListRef.bodyWrapper.scrollTop = 0
        // console.log('1144', document.getElementsByClassName('el-table__body-wrapper')[0].scrollTop = 10)
        // if (document.getElementsByClassName('el-table__body-wrapper')[0].scrollTop >0) { // 判断滚动条是否发生了偏远
        //   console.log('有滚动条')
        // } else {//   console.log('无滚动条')
        // }
        // document.getElementsByClassName('el-table__body-wrapper')[0].scrollTop = 0 // 恢复滚动条到顶部
      })
    },

你是否还在寻找稳定的海外服务器提供商？创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源，准确流量调度确保服务器高可用性，企业级服务器适合批量采购，新人活动首月15元起，快前往官网查看详情吧

分享文章：elementui的表格的滚动条的出现导致表格位置错乱-创新互联
本文地址：http://bzwzjz.com/article/dedgpp.html