el-table横纵向滚动条固定在可视屏幕内，并自适应分辨率（2.0）

前言

提示：基于上篇文章，使用了fixed固定列的 表格会出现错位后，换一种方法实现滚动条固定在可视屏幕，并自适应分辨率。

建议写在封装后的table组件中，不然一个一个加太麻烦。

原理：通过监听resize事件动态获取table的dom，离可视窗顶部的距离，传入的离底部的值，视窗高度，计算出table高度，设施给el-table组件自带属性height或maxHeight。

---

在方法中：

//table自动高度
returnTableHeight(ref,bottomOffset) {
  let height = null
  height = window.innerHeight - ref.getBoundingClientRect().top - bottomOffset
  return height
}


resizeTable() {
  this.$nextTick(() => {
     this.tableHeight = this.returnTableHeight(this.$refs.tableDom, 100)
  }, 0)
},

在mounted中：

mounted() {
    var _this = this
    this.resizeTable()
    window.onresize = function () {
      _this.resizeTable()
    }
  },
//记得清空  如果在keepalive中 则使用activated  deactivated
  destroyed(){
    window.onresize = null
  },

在html中：ref需要写在外层div中

<div ref="tableDom">
      <el-table v-loading="loading" :data="dataList" :maxHeight="tableHeight" border>
      </el-table>
</div>

总结

这样在不同分辨率，视窗不同大小的环境下 table都会在视窗中，且外层视窗不会出现滚动条。