el-table根據屏幕大小適配最大高度

問題描述

使用elementUI（v2.13.2）開發過程中使用el-table渲染列表，需要控制table的最大高度，達到溢出滾動的效果。

問題解決

參考element文檔，可以使用 max-height屬性（Table 的最大高度。合法的值為數字或者單位為 px 的高度），於是可以設置一個具體的值，eg：max-height="360px" 或max-height="360",但是這樣並不能解決屏幕適配的問題。那就考慮在dom渲染完成后，計算瀏覽器窗口的可見高度 減去 固定的元素高度，剩下的就是table的最大高度了。

• 給el-table設置max-height，maxHeight 默認為0

<el-table
  :data="tableData"
  :max-height="maxHeight"
>

• 方法一：在mounted階段設置計算maxheight的值

mounted() {
  this.$nextTick(() => {
    // window.innerHeight 瀏覽器窗口的可見高度，下面的 200 是除了table最大高度的剩余空間。
    this.maxHeight = window.innerHeight - 200
  })
},

• 方法二：在接口獲取數據后直接計算

methods: {
  getTableData() {
    getList().then(res => {
      this.tableData = res.data
      this.maxHeight = window.innerHeight - 200
    })
  }
}

備注

至於在mounted中為啥用 nextTick，因為table數據渲染過程中dom會重新計算高度，mounted中執行運算的時候接口的數據可能還沒有返回呢。
這個maxHeight的計算可以在請求接口獲取數據賦值 tableData 后計算，此時可以不用nextTick也能達到一樣效果。