el-table二次封装实现自适应页面(CSS)

问题背景

在使用各种表格的时候,会因为不同电脑的显示预设不同,即便是1080*1920的屏幕,有默认显示125%的,或是100%的,通常我们只能设置给定的height或者maxheight,这时候就产生了表格高度的问题。

以1080P为例子

125%下的页面情况

100%下的页面情况

为此希望解决这种下方留白以及需要为每个页面去设置高度的麻烦,这边使用的是flex布局来进行解决(当然也可以使用grid的fr)

解决方案

下给出简单的布局示意图

红框作为main,蓝色块为选择表单块为form,绿色为表格块flexTable 下面给出实例HTML结构与css代码

html 复制代码
<div class='main'>
<form></form>
<div class='flexTable'>
<el-table height='100%'></el-table>
</div>
</div>
css 复制代码
.main{
display:flex;
flex-direction:column;
height:100%;
}
.flexTable{
flex:1;
}

核心思想就是利用flex-grow来让flexTable这块自适应填充满页面,内部的el-table也可以通过100%来获取父盒子的高度,进而实现不同页面自适应效果。

不足

如果在同一设备上进行缩小后再放大,此时的flexbox处于一种溢出状态(出现滚动条),高度仍然为之前缩小到最小的高度,需要刷新后才会回到正常状态

相关推荐
懒大王952713 分钟前
uni-app + Vue3 开发展示 echarts 图表
前端·uni-app·echarts
yinuo20 分钟前
Uni-App跨端实战:微信小程序WebView与H5通信全流程解析(01)
前端
xkroy38 分钟前
ajax
前端·javascript·ajax
Yvonne爱编码42 分钟前
AJAX入门-URL、参数查询、案例查询
前端·javascript·ajax
闲人编程1 小时前
前端形态与样式风格:从古典到现代的视觉语言演进
前端·css·状态模式·组件·js·风格·响应式
JudithHuang1 小时前
Mac版微信开发者工具登录二维码不显示问题解决方案
前端
Swift社区1 小时前
如何解决 Vue2 前端项目为何无法访问本地资源(chunk.js 加载一直 pending/转圈)
开发语言·前端·javascript
清风细雨_林木木1 小时前
Vue加载资源‘如图片’的“直接引入“方式和“request()“的区别
前端·javascript·vue.js
大熊猫侯佩1 小时前
iOS 26 仅需几行代码让 SwiftUI 7 液态玻璃界面焕发新春
前端·swiftui·apple