Vue根據瀏覽器窗體變化動態設置Element Table組件的最大高度

這個場景應該經常遇到，比如說在一個頁面有一個table，想讓他數據過多的時候自動出現滾動條而不至於沖到屏幕外被隱藏，如果表格下面還有換頁的話，換頁直接沖沒了，所以需要計算這個table表格的最大高度。

使用的是餓了嗎Element組件庫的table組件，有一個屬性是 max-height ，設置表格的最大高度，高出自動出現縱向滾動條。

<el-table
  :data="dataList"
  :max-height="maxheight"
  v-loading="loading"
  class="table">
</el-table>

然后在data里面定義一個屬性，就是 maxheight ，設置表格的最大高度。

data() {
	return {
		// 這個減195是除了表格還有50px其他的東西在這個頁面所占的高度，比如下面的分頁，上邊的搜索啥的
		maxheight: window.innerHeight - 50
	}
}

這樣的話，第一次進入頁面，頁面顯示就可以了。但是有問題，就是當瀏覽器突然縮放或者是放大，放小，又會出問題。

這是由於在瀏覽器變化的時候沒有重新計算高度導致的，我們需要在瀏覽器變化的時候重新計算一下高度然后給table賦值就可以了。

  mounted () {
    window.onresize = () => {
      return (() => {、
          this.maxheight = window.innerHeight - 50
      })()
    }
  },

為保險，在actived鈎子中也重新賦值一下。

activated () {
    this.maxheight = window.innerHeight - 50
},