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外部,最后发现表头实在是不好处理,遂作罢(说明我一开始的思路就是错的)。

相关推荐
楊无好几秒前
react中props的使用
前端·react.js·前端框架
一个处女座的程序猿O(∩_∩)O6 分钟前
Vue-Loader 深度解析:原理、使用与最佳实践
前端·javascript·vue.js
一点一木18 分钟前
火山方舟 Responses API 实战指南:从概念到「公司尽调 Dossier 生成器」
前端·人工智能·api
还是大剑师兰特39 分钟前
TypeScript 面试题及详细答案 100题 (91-100)-- 工程实践与框架集成
前端·javascript·typescript·1024程序员节
用户47949283569151 小时前
typeof null === 'object':JavaScript 最古老的 bug 为何 30 年无法修复?
前端·javascript·面试
__WanG1 小时前
如何编写标准StatefulWidget页面
前端·flutter
非凡ghost1 小时前
By Click Downloader(下载各种在线视频) 多语便携版
前端·javascript·后端
非凡ghost1 小时前
VisualBoyAdvance-M(GBA模拟器) 中文绿色版
前端·javascript·后端
非凡ghost1 小时前
K-Lite Mega/FULL Codec Pack(视频解码器)
前端·javascript·后端
麦麦大数据1 小时前
F034 vue+neo4j 体育知识图谱系统|体育文献知识图谱vue+flask知识图谱管理+d3.js可视化
javascript·vue.js·知识图谱·neo4j·文献·体育·知识图谱管理