1. 背景

问题描述:

如图，若依前端表格高度都是固定写死的，因此会出现底部空一部分，现在希望自适应表格，使得表格一屏展示，且在隐藏查询条件等操作，导致屏幕大小变化时，表格可以同步自适应。

问题现状：很多时候，前端开发都是尽可能本机调整到刚刚好的高度，但不同用户不同电脑分辨率和浏览器缩放率，都使得整个页面不能一屏刚好展示。

2.解决方案

解决思路：

1. 通过display布局，将表格的外层元素设置为自适应大小，通过计算外层元素的高度，动态给el-table组件赋值高度
2. 通过监听页面resize事件，当页面变化时，自动重新计算表格高度

具体改动：

1. 因为自适应场景较多，先封装个自适应子组件OnResize.vue

 1 <template>
 2   <div></div>
 3 </template>
 4 <script setup name="OnResize">
 5 const { proxy } = getCurrentInstance();
 6 const emits = defineEmits(["update:tableHeight"]);
 7 
 8 const props = defineProps({
 9   tableHeight: {type:Number, default: 475},
10   biaogeRef: {type: String, default: "biaoge"}
11 })
12 
13 onMounted(() => {
14   onResize();
15   window.addEventListener('resize', onResize)
16 })
17 onBeforeUnmount(() => {
18   window.removeEventListener('resize', onResize)
19 })
20 
21 defineExpose({
22   onResize
23 })
24 
25 function calcHeight() {
26   if(proxy.$parent.$refs[props.biaogeRef]){
27     nextTick(() => {
28     const rect = proxy.$parent.$refs[props.biaogeRef].getBoundingClientRect();
29     if(rect.height >= 1){
30       emits("update:tableHeight", rect.height-1);
31     }
32   })
33   }
34 }
35 
36 function onResize(time=1000) {
37   setTimeout(() => {
38     calcHeight();
39   }, time)
40 }
41 </script>

其中：

　　入参为表格高度tableHeight和外层元素biaogeRef名字（页面有多个表格时，可以多次引用此组件）

　　calcHeight函数，通过外层元素biaogeRef名字的高度，得到表格自适应后的高度，并通讯到父组件

　　监听resize事件实现屏幕变化时，能跟随自适应变化

　　提供父组件可调用的自适应方法onResize

全局引用OnResize组件

将框架 \src\layout\index.vue 的 main-container 样式设置为display布局

.main-container {
  display: flex;
  flex-direction: column;
}

具体页面，将最外层的div设置为撑满全屏，同时内部样式也设置为display布局，引用onResize组件，代码结构一览

说明：一般页面除了表格，其它元素的高度都是固定的，只需将其中表格的外层高度设置为自动即可。

注：这里用两层div包裹table，第一层做自适应最大，第二层绝对定位填充。

关键样式代码

.nine-container001 {
  padding: 10px 8px 5px 8px;
  height: 100%;
  flex: auto;
  display: flex;
  flex-direction: column;
}

/** 表格 */
.nine-biaoge-001{
  flex: 1;
  position: relative;
  width: 100%;
  .biaoge-inner{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
  }
}

其它关键js代码

<script setup name="operlog">
…
// 定义表高度
const tableHeight = ref(450);
……
/** 显示隐藏查询条件 */
function handleQueryShow() {
  ……
  queryShow.value = !queryShow.value;
  proxy.$refs.resizeRef.onResize();
}
/** 重置按钮操作 */
function handleRefresh() {
  ……
  proxy.$refs.resizeRef.onResize();
}
</script>

最终效果：

        实现了一屏展示表格，隐藏查询条件，打开console控制台，放大浏览器，都能实现自动立即自适应表格

3. 总结

　　display布局是目前最流行的布局，熟练掌握，用于做弹窗自适应，做大屏，以及各种复杂布局，轻轻松松。

　　OnResize组件不仅仅可以用于表格，对于其它需要动态高度的元素，一样通用。