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

相关推荐
残*影3 分钟前
内联盒模型基本概念?——前端面试中的隐形考点剖析
前端·css·面试
EndingCoder1 小时前
React从基础入门到高级实战:React 核心技术 - 表单处理与验证深度指南
前端·javascript·react.js·前端框架
EndingCoder1 小时前
React从基础入门到高级实战:React 核心技术 - React 与 TypeScript:构建类型安全的应用
前端·安全·react.js·typescript·前端框架
谢尔登1 小时前
【React】jsx 从声明式语法变成命令式语法
前端·react.js·前端框架
kooboo china.2 小时前
Tailwind css实战,基于Kooboo构建AI对话框页面(二)
前端·css
yuanmenglxb20045 小时前
react基础技术栈
前端·javascript·react.js
Magnum Lehar6 小时前
vulkan游戏引擎vulkan部分的fence实现
java·前端·游戏引擎
FreeBuf_6 小时前
恶意npm与VS Code包窃取数据及加密货币资产
前端·npm·node.js
hdsoft_huge6 小时前
VUE npm ERR! code ERESOLVE, npm ERR! ERESOLVE could not resolve, 错误有效解决
vue.js·rust·npm
agenIT7 小时前
vue3 getcurrentinstance 用法
javascript·vue.js·ecmascript