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

好名字08212025-05-01 12:26

背景

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