关于前端:动态设置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】肯定要在页面加载数据之后再调用钩子函数，否则首次加载捕捉不到表格数据的高度，会呈现显示问题**