当前位置: 首页 > article >正文

【vue3中el-table表格高度自适应】

分享一种开发中遇到的比较方便的表格高度自适应方案

template代码

<div class="page">
	<div class="table_wrap">
		<el-table>
		</el-table>
	</div>
</div>

css代码
将el-table设置为绝对定位,相对于父元素定位且高度100%,这样表格就会占据它父元素的全部高度。
父元素的高度设置为flex:1,将根据页面的高度进行适配。

.page {
	display: flex;
	.table_wrap {
		flex: 1;
		height: 100%;
		position: relative;
		:deep(.el-table) {
			position: absolute;
			height:100% !important; // 重要
		}
	}
}


http://www.kler.cn/a/394883.html

相关文章:

  • stream学习
  • 从swagger直接转 vue的api
  • LaTeX之四:如何兼容中文(上手中文简历和中文论文)、在win/mac上安装新字体。
  • 算法学习第一弹——C++基础
  • 蓝队知识浅谈(上)
  • python魔术方法的学习
  • 探索 HTML 和 CSS 实现的 3D旋转相册
  • SQL面试题——蚂蚁SQL面试题 连续3天减少碳排放量不低于100的用户
  • c++写一个死锁并且自己解锁
  • 前端搭建低代码平台,微前端如何选型?
  • Android开发|关于LiveData、ViewModel、DataBinding理解和使用
  • UI架构解说
  • 智能量化交易的多样化策略与风险控制:中阳模型的应用与发展
  • 项目中用户数据获取遇到bug
  • 计算机课程管理:Spring Boot与工程认证的协同创新
  • Docker部署青龙面板,实现京东自动签到刷京东,提供脚本
  • 如何利用静态住宅IP提升TikTok营销效果:应对平台限制与账号安全的新利器
  • 理解HTTP中的Cookie与Session:机制、安全性与报头响应
  • 华为路由策略配置
  • SSL 证书申请以及配置流程
  • MySQL中,使用XtraBackup进行备份锁
  • Matlab2022b安装MinGW64
  • Windows仿macOS?看这一篇就够了
  • go语言 分布式一致
  • 知识库管理系统:企业数字化转型的加速器
  • 大模型研究报告 | 2024年中国金融大模型产业发展洞察报告|附34页PDF文件下载