整体满屏，表格高度auto

原创于 2023-04-20 10:03:37 发布 · 150 阅读

CC 4.0 BY-SA版权

文章标签：

该代码段展示了一个Vue.js组件中如何根据窗口大小和内部元素高度动态调整容器及表格的高度。在created钩子中监听窗口resize事件，调用onResize方法重新计算高度。onResize方法计算了body高度、外层盒子和内层盒子的偏移量，以确定新的containerHeight和tableHeight。

1.页面

ref="changeBox" :style="{ 'height': containerHeight + 'px' }"
ref="table"  :height="tableHeight" :max-height="tableHeight" 
ref="pageBox"

<template>
  <div class="orderInfo" ref="changeBox" :style="{ 'height': containerHeight + 'px' }">
    <el-table :data="tableData" border id="outExcel" ref="table" v-loading="tableLoading" row-key="id" stripe
      :height="tableHeight" :max-height="tableHeight" size="medium" style="width:100%;"> 
    </el-table>
    <div class="pageInfo" ref="pageBox">
    </div>
  </div>
</template>
data() {
    return {
      containerHeight: 800,
      tableHeight: 500,
    }
  },
  created() {
    this.$nextTick(function () {
      this.onResize();
    });
    window.addEventListener('resize', this.onResize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.onResize);
  },
  methods: {
   onResize() {
      this.$method.onResize(this.$refs.changeBox, this.$refs.pageBox);
      this.containerHeight = this.$method.containerHeight;
      this.tableHeight = this.$method.tableHeight;
    },
    }

2.js

export default {
  containerHeight:500,
  tableHeight:500,
  // 根据滚动条高显示的大小发生变化
  onResize(outerBox,innerBox) {
    var boxHeight = document.documentElement.clientHeight || document.body.clientHeight;
    var mapTop = outerBox.getBoundingClientRect().top;
    var pageHeight = innerBox.getBoundingClientRect().height;
    this.containerHeight = boxHeight - mapTop - 40;
    this.tableHeight = this.containerHeight - pageHeight;
  },
  
}

3.main.js

import method from "@/util/public";
Vue.prototype.$method = method;