页面布局（上下布局、上中下布局）

一、顶部表单固定，下面表格和其他内容可滚动  

布局：上下两部分组成，顶部内容+底部内容 

<template>
  <div class="app-container">
    <div class="topbox">
      //顶部表单内容
    </div>
    <div class="bottombox">
       //剩余内容
    </div>
  </div>
</template>


<style lang="scss" scoped>
.app-container {
  .topbox {
    width: 86%;
    height: 100px;
    position: fixed;
    z-index: 1;
    top: 50px;
    background-color: #fff;
    padding: 10px 0 10px 0;
  }
  .bottombox {
    min-height: calc(100vh - 100px);//顶部表单高度
    position: relative;
    overflow: hidden;
    padding-top: 110px; //顶部表单高度 + .topbox的padding，这个可以写在行内，根据表格顶部内容动态填写
  }
}
</style>

二、顶部表单不固定，改变表格高度（盒子高度自适应）

 

 布局：上中下三部分组成，底部内容，中间内容，底部内容

根据监听上面高度和下面高度，来改变中间高度，这样就实现了上中下布局，无论怎么改变窗口大小，都不会改变布局

<template>
  <div class="app-container">
    <div class="topbox">
      //顶部表单
    </div>
    <el-table
        :height="tableHeight" //第一步，高度变量
        ref="table"
        class="table"
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        //表格内容
      </el-table>
      
    //底部内容
    <div>123</div>
  </div>
</template>


<script>
export default {
  data () {
    return {
      tableHeight: '0px',//表格高度，第二步
    }
  },
  
  mounted () {//第三步
    // 根据浏览器高度设置初始高度，并监听浏览器高度变化，改变表格高度，50表示表格距离浏览器的高度
    this.$nextTick(() => {
      // 根据浏览器高度设置初始高度
      this.$refs.table.$el.getBoundingClientRect().top //表格距离浏览器的高度
      this.tableHeight = window.innerHeight - this.$refs.table.$el.getBoundingClientRect().top - 50//减掉头部任务栏高度
      // 监听浏览器高度变化，修改表格高度
      window.onresize = () => {
        this.tableHeight = window.innerHeight - this.$refs.table.$el.getBoundingClientRect().top - 50
      }
    })
  },
}
</script>

或者把他封装成一个方法，然后调用

新建src/utils/ resize.js

/**
 * center中间盒子的this.$refs.box1
 * bottom下面盒子的this.$refs.box
 * bottomBorder整个页面的底部的内外边距，也就是最外面的盒子的内外边距
 */
 
// 获取底部高度
export function HeightAdaptive (center, bottom, bottomBorder) {
  // 根据浏览器高度设置初始高度
  let topHeight = center.$el.getBoundingClientRect().top //中间盒子距离浏览器顶部的高度
 
  let bottomHeight = 0
  if (bottom) {
    bottomHeight = bottom.$el.offsetHeight //中间盒子的下面盒子的整体高度
  }
 
  if (!bottomBorder) {
    bottomBorder = 0
  }
  let hh = window.innerHeight - topHeight - bottomHeight - bottomBorder //减掉顶部距离、下面距离、内外边距
  // // 监听浏览器高度变化，修改中间盒子的高度————————放在这里无效
  // window.onresize = () => {
  //     hh = window.innerHeight - topHeight - bottomHeight - bottomBorder
  // }
  return hh
}
 

页面使用

<template>
  <div class="app-container">
    <div class="topbox">
      //顶部表单
    </div>
    <el-table
        :height="height" //第一步，高度变量
        ref="table"
        class="table"
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        //表格内容
      </el-table>
      
    //底部内容
    <div ref="box">123</div>
  </div>
</template>


<script>
import { HeightAdaptive } from '@/utils/resize.js'

export default {
  data () {
    return {
      height: '0px',//表格高度，第二步
    }
  },
  
  mounted () {
    // 根据浏览器高度设置初始高度，并监听浏览器高度变化，改变高度
    this.$nextTick(() => {
      this.height= HeightAdaptive(this.$refs.table, this.$refs.box, 20)
      // 监听浏览器高度变化，修改高度
      window.onresize = () => {
        this.height= HeightAdaptive(this.$refs.table, this.$refs.box, 20)
      }
    })
  },
}
</script>