基于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来触发销毁操作.有什么问题及建议欢迎评论.