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

54次阅读

共计 1201 个字符，预计需要花费 4 分钟才能阅读完成。

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

正文完