el-table根据屏幕大小适配最大高度

问题描述

使用elementUI（v2.13.2）开发过程中使用el-table渲染列表，需要控制table的最大高度，达到溢出滚动的效果。

问题解决

参考element文档，可以使用 max-height属性（Table 的最大高度。合法的值为数字或者单位为 px 的高度），于是可以设置一个具体的值，eg：max-height="360px" 或max-height="360",但是这样并不能解决屏幕适配的问题。那就考虑在dom渲染完成后，计算浏览器窗口的可见高度 减去 固定的元素高度，剩下的就是table的最大高度了。

• 给el-table设置max-height，maxHeight 默认为0

<el-table
  :data="tableData"
  :max-height="maxHeight"
>

• 方法一：在mounted阶段设置计算maxheight的值

mounted() {
  this.$nextTick(() => {
    // window.innerHeight 浏览器窗口的可见高度，下面的 200 是除了table最大高度的剩余空间。
    this.maxHeight = window.innerHeight - 200
  })
},

• 方法二：在接口获取数据后直接计算

methods: {
  getTableData() {
    getList().then(res => {
      this.tableData = res.data
      this.maxHeight = window.innerHeight - 200
    })
  }
}

备注

至于在mounted中为啥用 nextTick，因为table数据渲染过程中dom会重新计算高度，mounted中执行运算的时候接口的数据可能还没有返回呢。
这个maxHeight的计算可以在请求接口获取数据赋值 tableData 后计算，此时可以不用nextTick也能达到一样效果。