Vue-实现自适应屏幕高度的方法

项目中使用的element-ui的table组件，让它的高度自适应屏幕的高度，代码如下：

html:

 <div
        class="tablebox"
        v-bind:style="'height:' + (bodyHeight - 170) + 'px'">
        <el-table
          :data="tableData"
          style="width: 100%;"
          :height="bodyHeight - 210"
          v-loading="loading"
        >
        el-table>
 div>

js:

 data () {
      return {
        screenWidth: document.body.offsetWidth - 141,
        screenHeight: document.documentElement.clientHeight,
      }
    },



 computed: {
    bodyHeight() {
      return this.$store.state.bodyHeight;
    },
  },



  //存vuex中，各个页面都可以使用
 mounted () {

      var obj = this.state
      this.objs = JSON.parse(JSON.stringify(obj))
      var widths = document.body.offsetWidth
      this.$store.commit('width', widths)
      var heights = document.documentElement.clientHeight
      this.$store.commit('height', heights)
      const that = this
      this.$store.commit('clearBread', ['更新日志'])
      this.$store.commit('clearRoute', ['/manage'])

      var menu = JSON.parse(localStorage.getItem('menuList'))
      if (menu[0].children[0].name == '订单监控') {
        that.$router.push('/orderMonitor')
        this.$store.commit('clearBread', ['订单监控'])
        this.$store.commit('clearRoute', ['/orderMonitor'])

      }
      // 自适应布局
      window.onresize = () => {
        return (() => {
          window.screenWidth = document.body.offsetWidth
          that.$store.commit('width', window.screenWidth)
          that.screenWidth = window.screenWidth - 141
          window.screenHeight = document.documentElement.clientHeight
          that.$store.commit('height', window.screenHeight)
          that.screenHeight = window.screenHeight
          that.objs.bodyWidth = window.screenWidth
        })()
      }
   }

vuex-------store.js:

var state = {
  bodyWidth: 0,
  bodyHeight: 0,
 }
 const mutations = {
  height(state, n) {
    state.bodyHeight = n + 7
  },
  width(state, n) {
  state.bodyWidth = n
  },
 }