Vue根据浏览器窗体变化动态设置Element Table组件的最大高度

Vue根据浏览器窗体变化动态设置Element Table组件的最大高度

这个场景应该经常遇到，比如说在一个页面有一个table，想让他数据过多的时候自动出现滚动条而不至于冲到屏幕外被隐藏，如果表格下面还有换页的话，换页直接冲没了，所以需要计算这个table表格的最大高度。

使用的是饿了吗Element组件库的table组件，有一个属性是 max-height ，设置表格的最大高度，高出自动出现纵向滚动条。

<el-table
  :data="dataList"
  :max-height="maxheight"
  v-loading="loading"
  class="table">
</el-table>

然后在data里面定义一个属性，就是 maxheight ，设置表格的最大高度。

data() {
	return {
		// 这个减195是除了表格还有50px其他的东西在这个页面所占的高度，比如下面的分页，上边的搜索啥的
		maxheight: window.innerHeight - 50
	}
}

这样的话，第一次进入页面，页面显示就可以了。但是有问题，就是当浏览器突然缩放或者是放大，放小，又会出问题。

这是由于在浏览器变化的时候没有重新计算高度导致的，我们需要在浏览器变化的时候重新计算一下高度然后给table赋值就可以了。

  mounted () {
    window.onresize = () => {
      return (() => {、
          this.maxheight = window.innerHeight - 50
      })()
    }
  },

为保险，在actived钩子中也重新赋值一下。

activated () {
    this.maxheight = window.innerHeight - 50
},