el-tabs与table样式冲突导致高度失效问题解决(vue2+elementui)

背景

正常的el-table能根据父容器自动计算剩余高度,并会在列表中判断自适应去放出滚动条。而el-tabs本身就是自适应el-tab-pane内容的高度来进行自适应调节,这样就会导致el-table计算不了当前剩余的高度,所以当el-tabs里面包含el-table时,el-table的高度就没法成功根据剩余高度来计算。

解决方案

第一种:固定高度

给一个固定的height="80"等等就可以解决,不过不是自适应的。

第二种:calc计算剩余高度+设定px固定高度

csharp 复制代码
.tableClass {
    height: calc(100vh - 465px) !important;
}

把上述class加入到el-table当中,并且在el-table的height属性上添加

csharp 复制代码
height="0px"

前者是为了给table一个计算后的固定高度,后者是将height属性和class中的height属性绑定起来。

为什么加上height="0px"就可以绑定class中的height值并且把0px覆盖掉呢?

这是因为当table的height属性是字符串时,就受控于外部样式,而它是数字时默认为px。就不受控于外部样式。

失败案例思考

我一开始的思路其实是通过让el-tabs计算剩余容器高度,从而间接让el-table获取到el-tabs这个父容器给它的值,那么我通过下列样式成功计算后后发现。

csharp 复制代码
.el-tabs--card {
    height: calc(100vh - 300px);
}

.el-tab-pane {
    height: calc(100vh - 300px);
    overflow-y: auto;
}

发现,咦,虽然变成el-tabs内部有滚动条,外部确实没有滚动条,但是为啥表头和页码也滚动了,我只想要表格内容滚动的呀。然后我就把el-pagination迁移到el-tab-pane外部,最后发现表头实在是不好处理,遂作罢(说明我一开始的思路就是错的)。

相关推荐
知识分享小能手4 小时前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(上)——知识点详解 + 案例实战(4)
前端·javascript·学习·微信小程序·小程序·html5·微信开放平台
清灵xmf4 小时前
CSS field-sizing 让表单「活」起来
前端·css·field-sizing
文火冰糖的硅基工坊4 小时前
[光学原理与应用-480]:《国产检测设备对比表》
前端·人工智能·系统架构·制造·半导体·产业链
excel4 小时前
Qiankun 子应用生命周期及使用场景解析
前端
weixin_446260855 小时前
Django - 让开发变得简单高效的Web框架
前端·数据库·django
ObjectX前端实验室6 小时前
【react18原理探究实践】异步可中断 & 时间分片
前端·react.js
SoaringHeart6 小时前
Flutter进阶:自定义一个 json 转 model 工具
前端·flutter·dart
努力打怪升级6 小时前
Rocky Linux 8 远程管理配置指南(宿主机 VNC + KVM 虚拟机 VNC)
前端·chrome
brzhang6 小时前
AI Agent 干不好活,不是它笨,告诉你一个残忍的现实,是你给他的工具太难用了
前端·后端·架构
brzhang6 小时前
一文说明白为什么现在 AI Agent 都把重点放在上下文工程(context engineering)上?
前端·后端·架构