vue窗口大小监听以及el-scrollbar的warp宽度设置以及滚动条高度调整

  data () {
    return {
      screenWidth: document.body.clientWidth
    }
  },
  mounted () {
    // 监听窗口大小
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth
      })()
    }
    this.$nextTick(function () {
      // 计算实际显示的高度（我减掉的是空白部分和分页所占的位置，实际情况自己看）
      const realHeight = this.$refs.infoTable.clientHeight - 153 - 101
      // 这个是源码计算滚动条最终高度的算式上的修改式
      const heightPercentage = (realHeight * 100 / this.$refs.elScroll.$refs.wrap.scrollHeight)
      this.$refs.elScroll.sizeHeight = (heightPercentage < 100) ? (heightPercentage + '%') : ''
      // 这里必须延迟执行，不然覆盖不了原来的高度
      setTimeout(() => {
        this.$set(this.$refs.elScroll.$el.childNodes[2].children[0].style, 'height', ((heightPercentage < 100) ? (heightPercentage + '%') : ''))
      }, 500)

      this.$refs.elScroll.$refs.wrap.style.display = 'none'
      this.$refs.elScroll.$refs.wrap.style.width = this.$refs.elScroll.$el.offsetWidth + 17 + 'px'
      this.$refs.elScroll.$refs.wrap.style.display = '-webkit-box'
    })
  },
  
  watch: {
    screenWidth (val) {
      this.screenWidth = val
      // 根据父容器宽度动态调整el-scrollbar的warp容器的宽度
      this.$refs.elScroll.$refs.wrap.style.display = 'none'
      this.$refs.elScroll.$refs.wrap.style.width = this.$refs.elScroll.$el.offsetWidth + 17 + 'px'
      this.$refs.elScroll.$refs.wrap.style.display = '-webkit-box'
    }
  }