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 小时前
HTML5关键知识点之多种视频编码工具的使用方法
前端·音视频·html5
前端呆猿4 小时前
深入解析HTML5中的object-fit属性
前端·css·html5
再学一点就睡4 小时前
实现大文件上传全流程详解(补偿版本)
前端·javascript·面试
你的人类朋友5 小时前
【Node&Vue】什么是ECMAScript?
前端·javascript·后端
路灯下的光6 小时前
用scss设计一下系统主题有什么方案吗
前端·css·scss
l_tian_tian_6 小时前
SpringClound——网关、服务保护和分布式事务
linux·服务器·前端
一只小风华~6 小时前
CSS @media 媒体查询
前端·css·媒体
shix .7 小时前
最近 | 黄淮教务 | 小工具合集
前端·javascript
John_ToDebug7 小时前
Chrome 内置扩展 vs WebUI:浏览器内核开发中的选择与实践
前端·c++·chrome
烛阴8 小时前
解锁动态键:TypeScript 索引签名完全指南
前端·javascript·typescript