el-table切換頁面表格高度變化以及表格高度自適應問題

elementUI表格好像自帶一個bug，切換頁面的時候高度也會縮短

當時為了解決這一問題，設置了一個css樣式

<style lang="scss">
  .main-{
    .el-table__body-wrapper{
      height: 650px !important;
    }
  }
</style>

　　

這一段兒代碼是可以完美解決的

 

但是新的需求又來了，表格高度需要自適應屏幕

於是乎：

export function fitHeight(that) {
  that.$nextTick(function () {
    that.tableHeight = window.innerHeight - that.$refs.table.$el.offsetTop - 200;

    // 監聽窗口大小變化
    let self = that;
    window.onresize = function() {
      self.tableHeight = window.innerHeight - self.$refs.table.$el.offsetTop - 200
    }
  })
  //this.$refs.table.$el.offsetTop：表格距離瀏覽器的高度
  //50表示你想要調整的表格距離底部的高度（你可以自己隨意調整），因為我們一般都有放分頁組件的，所以需要給它留一個高度　
}

　　

這段兒代碼也可以完美解決

但是，湊合在一塊兒，又出現了新的問題，自適應高度的時候實際上那個css  important的那個高度還在，導致下方的滑動條不見了

於是乎：

 // 表格自適應相關設置
    mounted() {
      this.GLOBALFUN.fitHeight(this)
    },

將頁面設置keep-alive緩存
刪除！important樣式代碼

　　

 

 

完美解決~

ps：雙十一快樂~買買買萬歲~~~