vue2，实现不同分辨率下高度不同

问题：使用el-table组件时，分辨率不同下表格显示有问题，这时候需要把el-table的height属性设置为动态的，

data中定义

 data() {
    return {
   windowHeight: "",
}}

实时监听浏览器窗口分辨率变化，因为监听的是浏览器的窗口变化事件所以最好写在mounted周期里

  mounted() {
    // 实时监听页面宽度变化
    this.watchScreenHeight()
    window.onresize = () => {
      return (() => {
        this.watchScreenHeight()
      })()
    }
  },

methods:{
    watchScreenHeight() {
      // console.log(document.body.clientWidth, "页面宽度");
      if (document.body.clientWidth <= 1280 && document.body.clientWidth > 1100) {
        this.windowHeight = "83%"
      }
      if (document.body.clientWidth > 1300 && document.body.clientWidth < 2500) {
        this.windowHeight = "90%"
      }
      if (document.body.clientWidth > 2510) {
        this.windowHeight = "92%"
      }
    },
}

document.body.clientWidth是计算浏览器的可视宽度