Element UI 中Table没有纵向滚动条

已于 2023-12-30 22:56:26 修改
阅读量987 收藏 8
点赞数 8
分类专栏： Element UI 文章标签： 前端 elementui
于 2023-12-29 16:30:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43175672/article/details/135288042
版权

使用Element UI 时<el-table></el-table>没有纵向滚动条
解决方法：

<el-table v-loading="loading" :data="tableData" border style="width: 100%"  max-height="600"></el-table>

在<el-table></el-table>中添加max-height="600"属性

Orange-OS
关注
  • 8
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Element UI中的table组件添加横向滚动条转载的加上自己的理解和问题
m0_59638694的博客
07-25 1151
elementui的table的横向滚动条不显示
监听element-ui table滚动事件的方法
10-17
本文将详细介绍如何监听Element-UI的Table组件的滚动事件，以便在用户滚动到表格底部时动态加载更多数据。 ### 背景 在大数据展示场景中，为了提高页面性能和用户体验，通常会采用分页或无限滚动的方式来加载数据。...
vue项目 解决el-table自适应高度,vue页面不显示多条滚动条，超出的部分让el-table内部出现滚动条（推荐使用第二种解决方案；TAdaptivePage 组件新增左右分栏布局）
wocwin的博客
04-24 1万+
vue项目 解决el-table自适应高度,vue页面不显示多条滚动条，超出的部分让el-table内部出现滚动条（推荐使用第二种解决方案）
element ui el-table表格纵向横向滚动条去除并隐藏空白占位列
蓝胖子的博客
10-26 2438
element ui el-table表格纵向横向滚动条去除并隐藏空白占位列
Element-table 滚动条没有显示，但是可以鼠标滚轮下滑 --一定要试一下（网上大部分解决方法均无果）
最新发布
weixin_51998255的博客
06-25 769
使用的element版本为2.8.2，其他版本大概率也是这种解决方案。网上查找该问题，设置了hieght，也把table样式分开写到了style中，试了好多都没有解决。2.找到滚动条的样式设计 （我的就在第一个特别好找），可以看到项目自动设置滚动条的高和宽为零。照着网上的所有方法都试了一遍，无果。最后没办法一个一个文件排查出来了这个问题，希望可以帮助到遇到这个问题的同学。1.找到你的设置滚动条样式的css文件。你的项目本地css架构中大概率设置了滚动条框长宽为零，所以显示不出来滚动框。
vue+elementUi——实现竖向公告滚动效果(功能实现)
yehaocheng520的博客
07-22 6334
最近在做电商前台页面，首屏右下角有个公告，需要实现竖向滚动效果。也就是个竖向的轮播。 elementUi中是有轮播效果组件的。 代码如下： <el-carousel class="lunbo" height="35" direction="vertical"> <el-carousel-item v-for="(item, index) in currentTabList" :key="index"> <a :href="'/resource?id=' + it
el-table设置表格滚动条样式
qq_40576178的博客
07-12 1万+
1、局部滚动条样式： // 滚动条的宽度 /deep/ .el-table__body-wrapper::-webkit-scrollbar { width: 6px; // 横向滚动条 height: 6px; // 纵向滚动条 必写 } // 滚动条的滑块 /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb { background-color: #ddd; border-radius: 3px; } 2、全局滚动条样式： //滚动条的宽
el-table横纵向滚动条固定在可视屏幕内，并自适应分辨率（2.0）
qq_67447855的博客
03-09 1346
在不同分辨率，视窗不同大小的环境下 table都会在视窗中，且外层视窗不会出现滚动条。
element-ui中table不显示滚动条
MR_SNAIL的博客
11-15 5865
.el-table { .el-table__header-wrapper th { background-color: #f0f1ff; } .el-table__body-wrapper::-webkit-scrollbar { /* width: 0;宽度为0隐藏 */ width: 0px; height: 0; } .el-table__body-wrapper::-webkit-scrollbar-thumb { border-radi
el-table实现自适应高度滚动，并处理fixed的错位问题
Moon Star
04-03 5501
实现elementUI的el-table自适应高度，并解决设置fixed列时带来的问题。
ElementPlus el-table添加了height属性，但显示不了滚动条
m0_49256388的博客
06-30 2489
终于找到elementplus table不能显示滚动条的原因啦，大家快来看，跟网上的经验都不同！！
element的el-table中记录滚动条位置的示例代码
12-30
场景重现：在项目中使用了keep-alive来缓存组件，且使用element中的table列表，但在项目中是对table进行了二次封装，跟页码合在了一起。按照网上的直接对scrollTop赋值，赋值失败了，还要加上setTimeout才能成功，...
Element-ui之ElScrollBar组件滚动条的使用方法
10-18
ElScrollBar 组件是 Element-ui 中用于自定义滚动条样式的组件。下面详细介绍 ElScrollBar 组件的使用方法和原理。 1. 自定义滚动条的使用场景和优势 在开发Web应用时，尤其是在后台管理界面，常会遇到页面内容...
el-table 添加右固定列、横向滚动条、竖向滚动条
day_z的博客
03-11 1503
el-table在固定列，并且添加滚动条后，可能会出现各种各样的样式错乱问题，比如竖向滚动时固定列不滚动，又或者固定列高度少一截等问题。以下代码可以放在全局scss文件，除此之外还要在。
实现el-table表格滚动
localhost
03-21 1436
【代码】实现el-table表格滚动。
element-ui 表格滚动栏 无效 失效 element-table 滚动栏失效 element表格滚动栏失效 解决 element -表格 滚动栏 不见失效 解决 表格滚动栏失效
半只
07-19 6318
滚动栏只有细细的一条线，根本看不见， 这个问题不知道是怎么出现的，有帖子说是因为固定列造成的， 有帖子说是 列文字溢出造成的。插件，因为这个插件套的就是 element-table组件，不需要额外代码，原装使用。可是这些问题我都没有出现，一开始项目是有滚动栏的，不知道从什么时候开始就变没了。不然 当前页面样式无法穿透到 element表格源css。我使用的比较多的就是。
el-table横纵向滚动条固定在可视屏幕内，并自适应分辨率
qq_67447855的博客
03-09 2250
需求：在使用el-table中，当每页数据过多时浏览器会自动产生纵向滚动条，拖动后表头也看不到了，当表头过长后，也会产生横向滚动条，但是横向滚动条固定在table最底部，不利于操作。思路：利用自定义指令中的el找出table的dom元素，获取到视窗总高度，获取到table离视窗上面的高度，获取到指令中回传想设置的离底部的高度，计算后获得table高度，并设置css，再通过resize监听动态获取高度，设置高度。
el-table滚动条不显示问题
派大星球
04-07 5528
问题： 在Vue中使用el-table，设置表格高度和宽度后，表格内容超出不显示滚动条。 原因： 内容超出不限时滚动条，可能是因为滚动条为未设置高度和宽度。 解决： 设置滚动条宽度和高度即可。 设置滚动条宽度和高度 /deep/ .el-table__body-wrapper::-webkit-scrollbar { width: 8px; // 横向滚动条 height: 8px; // 纵向滚动条 必写 } 设置滚动条样式 /deep/ .el-table__body-wrapper:
[Vue前端] el-table滚动条不显示问题的解决
热门推荐
zoEy的博客
10-20 2万+
代码： <el-table class="show_table" border :key="itemKey" :data="shopWindowTable" :header-cell-style="headerStyle" :row-style="{ height: '50px' }" :cell-style="{ padding: '2px' }" ..
element ui隐藏table滚动条
06-28
### 回答1： 可以通过设置表格的样式来隐藏滚动条，具体方法如下： 1. 在表格的外层容器上设置样式 overflow: hidden; 2. 在表格的 tbody 上设置样式 overflow-y: scroll; 这样就可以隐藏表格的滚动条了。 ### 回答2： Element UI 是一个基于 Vue.js 的 UI 库，它提供了丰富的组件，包括表格组件。在使用 Element UI 表格组件时，有时候需要隐藏表格的滚动条，这可以通过以下步骤完成： 1. 找到 Element UI 表格组件的容器元素，一般是一个 class 为 el-table 的 div 元素。 2. 在该容器元素的样式中设置 overflow 属性为 hidden，这样便可隐藏表格的滚动条。 例如，如果要隐藏 id 为 my-table 的表格组件的滚动条，可以在样式中添加如下代码： ```css #my-table .el-table { overflow: hidden; } ``` 这样便可成功地隐藏表格组件的滚动条。 另外，如果想要隐藏表头和表格内容的滚动条，可以将 overflow 属性应用到 el-table__header-wrapper 和 el-table__body-wrapper 元素，例如： ```css #my-table .el-table__header-wrapper, #my-table .el-table__body-wrapper { overflow: hidden; } ``` 这样便可同时隐藏表头和表格内容的滚动条。 总之，Element UI 表格组件的滚动条隐藏，可以通过设置容器元素的 overflow 属性为 hidden 实现。 ### 回答3： 在 Element UI 中，我们可以使用 el-table 组件来显示数据表格，而当数据量较大时，就会出现滚动条。如果我们希望隐藏滚动条，可以采取以下方法： 方法1：CSS 样式方式 1.在 el-table 标签上加上 style="overflow:hidden;"，这样能够隐去直接展示的滚动条，但是在鼠标滚动滚轮的时候，仍会出现默认的浏览器滚动条，不能达到完全隐藏的效果。 2.给 el-table 标签外层添加一个包裹层，如 <div class="table-wrapper">，并设置其样式为 overflow:hidden;。同时，将 el-table 的高度设置为最大值：max-height: none; height: auto;。这样展示时就能完全隐藏滚动条。 3.但是，由于这种方法需要额外添加包裹层，所以可能会减少页面的美观度，不够简洁。 方法2：JS 方式 1.在页面加载完成后，获取 el-table 的 class 属性，如：let tableClass = document.querySelector('.el-table--scrollable-y'); 2.获取到 class 属性后，为 el-table 隐藏滚动条：tableClass.style.overflowY = 'hidden'; 3.但是，使用 JS 方法隐藏滚动条需要在页面加载后再操作，如果操作晚了容易引起页面的闪烁。同时，这种方式虽然能够隐藏滚动条，但是并没有解决滚动的问题，使用鼠标滚轮时仍会触发滚动事件。 总结来说，以上两种方法中，CSS 样式方式更为简洁，但是需要额外添加包裹层，而 JS 方式虽然容易实现，但是需要注意操作的时机。在实际开发中，可以根据具体需求和场景选择合适的方法来隐藏滚动条。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值