动态计算el-table高度

如果你要求页面内容只能在一屏内显示，不想出现页面竖直滚动条，且页面使用el-table，那么就需要el-table动态计算高度

      <el-table
        v-loading="loading"
        :data="tableData"
        :height="tableHeight"
        ref="table"
        highlight-current-row
      >
      <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="序号" type="index" align="center">
          <template slot-scope="scope">
            <span>{{(query.pageNum - 1) * query.pageSize + scope.$index + 1}}</span>
          </template>
        </el-table-column>
       </el-table>

  data() {
    return {
      tableHeight: 'calc(100vh - 320px)', // 220因为我页面有些元素是固定高度，这里要减掉

  mounted() {
    this.getTableHeight()
    window.addEventListener('resize', this.getTableHeight)
  },

  methods: {
    // 动态计算表格高度
    getTableHeight:debounce(function(extraHeight=0) {
      this.$nextTick(() => {
        const tableHeight = this.$refs?.table?.$el.offsetHeight
        console.log('tableHeight:', tableHeight)
        if (!isNaN(tableHeight) && typeof tableHeight === 'number') {
          const otherHeight =  220 + tableHeight + extraHeight
          this.tableHeight = "calc(100vh - " +  otherHeight +"px)"
        }
      })
    }, 100, true), // debounce是节流函数，可用可不可用

  destroyed(){
    window.removeEventListener('resize', this.getTableHeight)
  }