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

相关推荐
黄同学real2 分钟前
Vue 项目中运行 `npm run dev` 时发生的过程
前端·vue.js·npm
黄同学real24 分钟前
vue 优化策略,大白话版本
前端·javascript·vue.js
xcLeigh34 分钟前
HTML5好看的水果蔬菜在线商城网站源码系列模板8
java·前端·html5
周胡杰1 小时前
鸿蒙文件上传-从前端到后端详解,对比jq请求和鸿蒙arkts请求区别,对比new FormData()和鸿蒙arktsrequest.uploadFile
前端·华为·harmonyos·鸿蒙·鸿蒙系统
2501_915373882 小时前
electron+vite+vue3 快速入门教程
前端·javascript·electron
zhl9999999992 小时前
xe-upload上传文件插件
前端·上传文件·xe-upload·兼容app上传文件
徐_三岁3 小时前
Vue3 + TypeScript 实现 PC 端鼠标横向拖动滚动
vue.js·typescript
宁酱醇4 小时前
CSS基础_@拉钩教育【笔记】
前端·css
建群新人小猿4 小时前
CRMEB-PRO系统定时任务扩展开发指南
android·java·开发语言·前端
牧天白衣.4 小时前
vue 和 html 的区别
前端