若依框架前端表格自适应

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组件不仅仅可以用于表格,对于其它需要动态高度的元素,一样通用。

posted @ 2024-07-04 10:29  Vrapile  阅读(262)  评论(0编辑  收藏  举报