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()
    })
  },
}