若依框架前端表格自适应

1. 背景

问题描述:

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

 

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

 

2.解决方案

解决思路：

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

 

具体改动：

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

<template>
  <div></div>
</template>
<script setup name="OnResize">
const { proxy } = getCurrentInstance();
const emits = defineEmits(["update:tableHeight"]);

const props = defineProps({
  tableHeight: {type:Number, default: 475},
  biaogeRef: {type: String, default: "biaoge"}
})

onMounted(() => {
  onResize();
  window.addEventListener('resize', onResize)
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', onResize)
})

defineExpose({
  onResize
})

function calcHeight() {
  if(proxy.$parent.$refs[props.biaogeRef]){
    nextTick(() => {
    const rect = proxy.$parent.$refs[props.biaogeRef].getBoundingClientRect();
    if(rect.height >= 1){
      emits("update:tableHeight", rect.height-1);
    }
  })
  }
}

function onResize(time=1000) {
  setTimeout(() => {
    calcHeight();
  }, time)
}
</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组件不仅仅可以用于表格，对于其它需要动态高度的元素，一样通用。