关于前端:动态设置element-表格高度

1 新建js
setHeight.js

// 用于计算页面element表格高度，动静设置表格高度export function setHeight() {  const configHeight = window.innerHeight - this.$refs.tableRef.$el.offsetTop - 50  const body = document.getElementsByClassName('el-table__body')[0].offsetHeight  const head = document.getElementsByClassName('el-table__header')[0].offsetHeight  const total = body + head + 2  console.log('total', total)  if (configHeight < total) {    this.tableHeight = configHeight > 300 ? configHeight : 300  } else {    this.tableHeight = total > 300 ? total : 300  }  // const card = document.getElementsByClassName('base-table-card')  // card[0].style.height = configHeight + 50 + 'px'  // 监听窗口大小变动  const self = this  window.onresize = function () {    const configHeight = window.innerHeight - self.$refs.tableRef.$el.offsetTop - 50    const body = document.getElementsByClassName('el-table__body')[0].offsetHeight    const head = document.getElementsByClassName('el-table__header')[0].offsetHeight    const total = body + head + 2    console.log('total1', total)    if (configHeight < total) {      self.tableHeight = configHeight > 300 ? configHeight : 300    } else {      self.tableHeight = total > 300 ? total : 300    }    // const card = document.getElementsByClassName('base-table-card')    // card[0].style.height = configHeight + 50 + 'px'  }}

2 页面应用流程
<1>

<2>

<3>

**!!!留神：
【1】 页面记得引入上方的js
【2】肯定要在页面加载数据之后再调用钩子函数，否则首次加载捕捉不到表格数据的高度，会呈现显示问题**