基於element動態調整table高度

//廢話補多說,先上代碼
methods: {
    //計算table高度
    _getTableHeight() {
      let tableH = 280
      let tableHeightDetil = window.innerHeight - tableH
      if (tableHeightDetil <= 300) {
        this.tableHeight = 300
      } else {
        this.tableHeight = window.innerHeight - tableH
      }
    }
}

　然后是頁面初始的:

 created() {
　　//頁面加載完畢計算高度
    this._getTableHeight()
  },
  //掛載window.onresize事件
  mounted() {
    let _this = this
    window.onresize = () => {
      if (_this.resizeFlag) {
        clearTimeout(_this.resizeFlag)
      }
      _this.resizeFlag = setTimeout(() => {
        _this._getTableHeight()
        _this.resizeFlag = null
      }, 100)
    }
  },
  // 注銷window.onresize事件
  beforeRouteLeave(to, from, next) {
    //離開組件的時候觸發
    window.onresize = null
    next()
  },

　　最后是html處

 <el-table
      :data="branchBankList"
      stripe
     //這里開始(element組件里的,不懂看官網)
      v-if="tableHeight"
      :height="tableHeight"
    　　//這里結束
      border
      :header-cell-style="{backgroundColor:'#f7f6fd'}"
      empty-text=' '
      >

　　不要忘了在data里面把tableHeight給加上.

　　目前就這些,實現的功能是 頁面加載自動計算高度,減的tableH是距離底部的高度.因為底部一般有分頁或者操作按鈕等東西,所以只能自己輸入自己調試,有更好的方法的歡迎私信.評論.

　　當瀏覽器窗口大小改變的時候,會調用計算方法,來實時改變table高度.並設置有最低高度,防止瀏覽器高度太窄使table頁看不到的情況,

　　為了增加性能,要在離開當前頁面的時候自動銷毀onresize方法,防止誤觸發,因為我們用的是keep-alive,不會觸發Destroyed這個生命周期,所以使用beforeRouteLeave來觸發銷毀操作.有什么問題及建議歡迎評論.