elementui——el-tabs固定高度&内容超出高度可滚动

最新推荐文章于 2025-04-03 11:16:46 发布

爱吃松果的美美

最新推荐文章于 2025-04-03 11:16:46 发布

阅读量1.3w

点赞数 4

分类专栏：踩坑系列文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_37877794/article/details/118387660

版权

这篇博客主要介绍了如何在ElementUI的el-tabs组件中实现固定高度，并确保内容超出时可以滚动。通过设置外部容器.el-tabs--card和每个tab内容容器.el-tab-pane的高度，可以达到屏幕高度适应并实现滚动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

.el-tabs--card {
  height: calc(100vh - 110px);
  /* overflow-y: auto; */
}
.el-tab-pane {
  height: calc(100vh - 110px);
  overflow-y: auto;
}

!!!注意
.el-tabs–card是外层
.el-tab-pane是每一个tabs内容的容器，这这里设置的高度才是跟屏幕高度一样的

在这里插入图片描述

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

爱吃松果的美美

关注关注

4
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue2 el-tabs 实现当内容超出时可以左右切换滚动的tab标签

小白小白从不日别的博客

09-11

1219

基于 el-tabs 实现当内容超出时可以左右切换滚动的tab标签

2021年最新Web前端面试题精选大全及答案

m0_54861649的博客

03-07

2134

参与评论您还未登录，请先登录后发表或查看评论

vue tabs内容过长切换支持滚动插件

gongliming_qd的博客

04-14

676

样式效果： tabs切换自动居中 // 组件代码 <template> <div class="tabs topNavSet" id="topNavSet" > <ul id="topNavSetUl"> <li v-for=" (item, index) in list " :key="item.id" @click="clickSingle(item, index

el-tabs修改tab标签样式

热门推荐

zyynb的博客

02-23

1万+

vue+el-table设置高度自适应，动态设置height

el-table设置固定高度

W8034的博客

04-27

4969

:row-class-name="'rowStyle'"//el-table标签里 :row-style="{ height: '48' }" //el-table标签里 /deep/ .admin-table .rowStyle { height: 48px; line-height: 48px; } /deep/ .admin-table .el-table td { padding: 0; }

vue 动态的获取屏幕高度

顽石⚡

12-04

9578

大概的思路是，监听屏幕高度的变化，每当屏幕高度变化时，就重新获取屏幕高度，并且重新设置height. template &lt;div id="maindiv" :style="{height:(screenHeight-80)+'px'}" &gt; &lt;keep-alive&gt; &lt;component :is="fl...

el-tabs 自适应高度

CMDN123456的博客

09-19

766

el-tabs 自适应高度

el-tabs 高度整个页面_用这套方法排版，轻松打造页面高级感！

weixin_39538607的博客

12-25

1939

今天这篇方法，主要是描述如何通过刻意练习来帮助大家提升版式能力。我举了不少案例，内容过于干货，小伙伴们可以考虑先提前收藏，方便后续查阅~~版式中排版的技巧，是最能体现设计师基础设计水平的能力了。无论是在做日常设计工作，还是在准备汇报述职的PPT，又或者是作品集，版式能力都会影响到你作品最终对他人留下的印象。大气、干净的版式，往往能把你的作品带上另一个高度，让阅读你作品的人赏心悦目，心境舒...

elementui-Tabs 标签页固定高度&内容超出高度可滚动

qq_42730111的博客

12-06

1万+

1、说明当我们使用Tabs标签页的时候，直接套进去会发现标签下的内容的自适应的，会根据你的内容的大小进行扩展（如下图）。。 2、效果也许你会觉得这并不符合你的需求，需要的是把内容的高度设置为100%同时有滚动效果 3、实现方法给内容设置滚动样式即可 .el-tabs__content{ height: calc(100vh - 110px); overflow-y: auto; } ...

在el-dialog中使用el-tabs 时,使所有的选项高度一致

weixin_39621777的博客

05-05

1023

定义一个模板，然后通过默认打开第一个选项卡的高度，重新设置el-tabs高度。更改css样式使选项卡撑开。在el-dialog 弹窗中使用el-tabs，切换选项卡时窗口高度会乱蹦，导致弹窗按钮到处跑。

el-table高度适配问题

程序猿GTC

05-22

2315

当多个tabs时，如果table高度，依赖性其父组件的高度，只有第一个tabs高度为实际值，其他tabs的高度为0，但mounted时，已经赋值给table,会导致其他tabs的table显示不出来。2 在tabs的子组件设置一个属性，外层的高度获取到后，通过属性传给子组件，子组件显示时，直接计算一下（减去其他部分的高度，一般就是底部查询或操作高度，底部分页高度）el-table不能自适应高度，必须给定具体的值，才能显示正常，同时在数据条数超过其高度时，table出现滚动条，而不是整个页面出现滚动条。

el-tabs 高度整个页面_关于专题页面的那点事儿

weixin_39926103的博客

12-13

1021

如何制作专题所谓专题页即利用一个主题来策划一个页面或一个活动流程的页面,它有明确的主题、还有一定时效性(比如情人活动圣诞活动),往往这些页面的制作周期也比较短。那么作为设计师如何要快速高质打造一个专题页,能够很好的吸引消费者来购买...我们将从以下几个方面讲解1. 专题定位接到一个新任务沟通需求时，我们往往会听到这样的声音：要喜庆、要霸气、要有PK感、要可爱、要酷…………，作为设计师这时请切换至...

在el-tabs中echarts图表宽高设置style=“width: 100%； height: 100%“不起效变成100px的问题

鹤渺的星球

12-22

2872

最粗暴的解决办法是给div一个固定的高度，也就是上面三种解决方案的核心，比如你遇到问题时候实时给div一个高宽恒定值，然后看看画出的图尺寸变没有，再去考虑是样式冲突或者组件渲染的问题导致这种情况。

mac主流程中发生javascript错误_（详解）从浏览器输入 URL 到页面展示过程发生了什么？...

weixin_39605997的博客

11-23

143

element-plus el-tabs组件label固定，不随着内容溢出滚动

周厚强的博客-13797120587

05-06

2639

vue3 element-plus el-tabs组件label固定，不随着内容溢出滚动。

element el-table表格高度自适应

帅的博客

01-05

3910

我们在使用el-table表格控件时，给el-table标签一个固定的高度，不同的电脑打开界面，表格高度不能自适应。表格高度需要自适应的话，可以给el-table标签绑定一个值tableHeight <el-table :data="tableData" highlight-current-row @row-click="rowClick" :height="tableHeight"> computed里面，通过window.innerHeight得到屏幕高度，减去过滤条件的高度，返回表格高

elementui el-tabs el-tabs--top 动态table切换

09-13

`element-ui` 是一个基于 Vue.js 的桌面端组件库，提供了丰富的 UI 组件，用于构建交互式的用户界面。`el-tabs` 是 `element-ui` 中的一个标签页组件，它可以创建包含多个面板的标签页，用户可以通过切换标签页来查看不同的内容。 `el-tabs--top` 是 `el-tabs` 组件的一个属性，用于指定标签页的布局位置。当使用 `el-tabs--top` 时，标签页将显示在内容区域的上方。关于“动态table切换”，通常是指在使用 `el-tabs` 组件时，根据切换的不同标签页，表格（table）也会相应地进行动态更新。这通常涉及到数据的动态绑定和组件的条件渲染。在 `element-ui` 中，你可以使用 `v-if` 或者 `v-show` 指令来实现动态切换表格内容。通过监听 `el-tabs` 的 `tab-click` 事件来判断当前选中的标签页，然后根据这个标签页来决定显示哪个表格数据。以下是一个简单的示例代码： ```html <template> <el-tabs v-model="activeName" @tab-click="handleTabClick"> <el-tab-pane label="用户管理" name="first">用户表格数据</el-tab-pane> <el-tab-pane label="订单管理" name="second">订单表格数据</el-tab-pane>  </el-tabs> <el-table v-if="activeName === 'first'" :data="userTableData">  </el-table> <el-table v-else-if="activeName === 'second'" :data="orderTableData">  </el-table>  </template> <script> export default { data() { return { activeName: 'first', // 当前激活的标签页名称 userTableData: [], // 用户表格数据 orderTableData: [], // 订单表格数据 }; }, methods: { handleTabClick(tab, event) { // 根据tab.name来更新数据或者其他逻辑 }, }, }; </script> ``` 在这个示例中，当用户点击不同的标签页时，会触发 `handleTabClick` 方法，在该方法中可以编写更新表格数据的逻辑，然后根据 `activeName` 的值来决定显示哪个表格。