vue设置元素自动充满（页面高度-其它元素的高 || 页面高度-距离顶部的高度-底部元素的高度）

<template>
  <div class="app-container">
　　<el-row class="search" ref="tip">第一个模块</el-row>
　　<el-row class="search" ref="elForm">第二个模块</el-row>
　　<el-row class="table" ref="tableList">
　　　　表格模块
　　</el-row>
  </div>
</template>

<script>
export default {
  name: "UserInfo",
　...
  methods: { 
    // 表格高度
    getHeight() {
      // TODO 计算元素的高度和上边距，后面可能会用到
      // 获取高度值 （内容高+padding+边框）
      // let tipHeight = this.$refs.tip.$el.offsetHeight // div高度
      // let tipTop = this.$refs.tip.$el.offsetTop // div距离上边距高度
      // let formHeight = this.$refs.elForm.$el.offsetHeight // 表单高度
      // let elFormTop = this.$refs.elForm.$el.offsetTop // 表单距离上边距高度
      let tableTop = this.$refs.tableList.$el.offsetTop // 表上边距的高度
      let bottomHeight = 20 //  尾部高度固定的

      this.tableHeight = window.innerHeight - tableTop - bottomHeight - 15; // 15像素是为了计算出来的数据默认和底部有15像素的边距
    },
  },
beforeMount() {
    // 滚动条的获取
    window.addEventListener('resize', this.getHeight)
  },
  mounted() {
    this.$nextTick(() => { // 页面渲染完成后的回调
      this.getHeight()
    })
  },
}