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：双十一快乐~买买买万岁~~~