关于elemengt-ui table组件同时拥有竖向滚动条和横向滚动条时，需要滚动到最下方才能出现横向滚动条的问题

最新推荐文章于 2025-11-27 08:52:14 发布
原创 最新推荐文章于 2025-11-27 08:52:14 发布 · 889 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ui

如果table表格同时拥有横向滚动条和竖向滚动条时，对于需要横向看数据时，需要将竖向滚动条拉到下方才能看到横向滚动条，用户体验不友好。

我这里采取的解决办法是在table上面加一个属性，max-height,用来动态更新元素

在这里插入图片描述
在这里插入图片描述
二：也可以用大佬开发的组件来解决。
使用el-table-horizontal-scroll来解决
使用npm下载，然后在元素上面绑定el-table-horizontal-scroll=’always‘，这个组件有两个值，hover和always.

neverdarkness
关注
Vue3 - 解决 iView 表格组件 Table 滚动条无法拖动问题，表格固定列时滚动条失效导致拖拽没反应，把表格的某列固定后横向或纵向滚动条无法滚动的问题处理（有合计行或固定时导致失效无法拖曳）
🏆 前端领域优质创作者
07-14 3475
vue3，iview，表格组件，table，滚动条，无法拖曳，拖动，无效，不生效，没反应，无法滚动，鼠标拖住不动，设置固定列，横向滚动条在固定列的位置上无法滚动的问题，vue3iview表格固定后滚动条无法拖动，解决iview带合计行表格固定列后滚动条无法拖拽的问题，table固定列后,进度条无法拖拽iview固定列导致滚动条失效，也不报错，样式，无法覆盖，deep，iviewtable组件当固定高度后，fixed某一列会出现盖住滚动条的情况，滚动条始终位于可视区域的实现，详细解决方案，如何解决这个问题
element如何让table表格的横向滚动条一直显示,而不是要滚动到表格底部
Creci的博客
10-21 7104
给表格添加高度即可： <el-table :max-height="tableHeight" > 这个高度你也可以每次加载页面时动态计算 this.tableHeight = window.innerHeight - 290;
el-table 只有竖向滚动条拉到最底部时，才显示横向滚动条
violetlength的专栏
01-06 1850
el-table 只有竖向滚动条拉到最底部时，才显示横向滚动条；不用竖向滚动条到底部，即可实现横向条显示；设置el-table 外层css。设置el-table css。如上设置即可实现所需效果；
3分钟搞定Element Table横向滚动条：让数据表格不再尴尬隐藏
最新发布
gitblog_00235的博客
11-27 476
还在为Element UI表格横向滚动条被隐藏而烦恼吗？当表格内容超出容器宽度时，默认的横向滚动条需要用户手动滚动才能看到，严重影响数据展示体验。el-table-horizontal-scroll插件应运而生，专门解决这一痛点，让横向滚动条始终显示在表格底部，提升用户体验。 ## 为什么需要这个插件？ Element UI的el-table组件虽然功能强大，但在处理宽表格时存在一个明显的设计
Table固定指定列进行横向滚动(可拓展)
05-29
根据不同需求固定指定列进行横向滚动操作 提供有Index.html，Index.js文件 Index.js可进行拓展(固定指定行进行垂直滚动操作)
将el-table的横向滚动条固定在可视屏幕的下方
huatoudd的博客
10-26 2557
elementui table横向滚动条固定在屏幕最下方显示 原因：数据一多，横向滚动条需要配合纵向滚动条拖动才能看到，十分不方便 解决方法：在el-table中增加 height属性 返回窗口的文档显示区的高度，并且赋值给el-table computed: { tableMaxHeight() { return window.innerHeight - 170 + 'px'; } ...
Vue Cli Elemengt Ui框架 Tab表格居中
weixin_57384516的博客
06-03 534
Vue Cli Elemengt Ui框架 Tab表格居中 需要在对应的页面样式加上 表格数据居中的效果 /deep/.el-table th > .cell { text-align: center; } /deep/.el-table .cell { text-align: center; } /deep/的意思是深入的更改
Vue进阶（幺幺玖）：element-ui table组件适应性问题（横向滚动条）
IT全栈 华强工作室
05-29 7342
在开发前端项目过程中，解决适配性、兼容性问题是经常遇到且费事费力的苦差事，尤其是在开发Vue项目，应用部署在IE（尤其是IE9）上的时候。 在进行动态展示（根据后台返回的表头、表数据展示）搜索结果时，会遇到搜索结果适配屏幕宽度或高度，但是却会出现纵向或横向滚动条的现象，通过F12调试页面元素，会发现动态的增删overflow:auto元素属性，会解决以上问题。由此可知，动态渲染页面元素时，页面加载之前，由于页面元素尚未完全加载计算元素属性值结束，会造成屏幕出现不适配，即会出现横向纵向滚动条的问题，现在的解决
Element UI中的table组件添加横向滚动条
热门推荐
Web_chicken的博客
08-27 1万+
如何给Element UI中的table组件添加横向滚动条 并非是浏览器自带滚动条样式，而是类似于Element滚动条样式 话不多说直接上代码 .el-table__body-wrapper::-webkit-scrollbar { width: 8px; /*滚动条宽度*/ height: 8px; /*滚动条高度*/ } .el-table__body-wrapper::-webkit-scrollbar-track { border-radius: 10px; /*
解决layui数据表格table的横向滚动条显示问题
10-16
然而，在某些情况下，开发者在使用layui数据表格时可能会遇到横向滚动条显示的问题，这可能会导致表格的用户体验受到影响。 要解决layui数据表格的横向滚动条显示问题，首先需要了解造成这个问题的原因。根据fly...
element的el-table中记录滚动条位置的示例代码
10-16
在本篇示例代码中，将重点介绍如何在Element UI的el-table组件中记录和恢复滚动条位置。 通常情况下，直接通过JavaScript的`scrollTop`属性赋值来控制滚动条位置，这种方法简单直接。但在一些特定的场景下，例如在...
监听element-ui table滚动事件的方法
10-17
在开发Web应用时，Element-UI 是一个常用的前端组件库，尤其在构建管理平台时，其丰富的表格（Table）功能非常实用。本文将详细介绍如何监听Element-UI的Table组件的滚动事件，以便在用户滚动到表格底部时动态加载更...
element el-table实现可进行横向拖拽滚动
我总是词不达意的博客
12-28 9125
el-table左右拖动，element el-table实现可进行横向拖拽滚动
el-table 横向滚动条固定在可视窗口底部
s_156的博客
06-30 9762
有一个需求,当的宽度超出浏览器宽度时，虽然el_table底部会出现滚动条，但是每次需要先滚动到底部，才能使用el-table的滚动体，很是麻烦。因此当el_table的宽度超出屏幕宽度时，要在可视范围底部添加一个横向的滚动条，在网上找了四篇不同方法，全都试了一遍，四个方法的原文地址以及效果图我都贴出来了，看个人选择了，我自己用的第二个，一个大佬写的。
给table添加横向或者纵向滚动条
奋斗的秋天的博客
08-05 5367
转载地址：https://blog.youkuaiyun.com/weixin_44084713/article/details/113887632
Bootstrap——table标签使用横向滚动条解决方案
无限迭代中......
02-15 1万+
官方文档 https://v4.bootcss.com/docs/content/tables/ 解决方案 方法一：原生CSS 给table标签添加CSS属性 table显示滚t动条，要先把table放到一个div中，控制div 属性overflow值为scroll <div style="overflow:scroll;"> ······ ······ </di...
随记 给table添加横向或者纵向滚动条
weixin_44084713的博客
02-20 4035
转载地址 HTML如何给table添加滚动条 要给table添加滚动条其实很简单，主要是给table放到一个div里去，然后再设置div显示滚动条即可。示例代码如下所示： <!--div比table大小要小才会显示--> <div style="overflow-x: auto; overflow-y: auto; height: 100px; width:200px;"> <table id="table" border="1" align="center" wi
element UI ：el-table横向列内容超出宽度，滚动条不显示问题
qq_44776454的博客
07-18 4702
element UI ：el-table横向列内容超出宽度，滚动条不显示问题
vue3Element-ui中el-table添加了竖向滚动条使用横向滚动条出现错位的问题
09-21
在使用Element-ui的el-table组件中，如果同时添加了竖向滚动条和横向滚动条，可能会出现错位的问题。这是因为竖向滚动条会占据一定的宽度，导致横向滚动条的位置不正确。 解决这个问题的方法是使用CSS样式来调整滚动条的位置。可以使用以下代码： ```css .el-table__body-wrapper::-webkit-scrollbar { width: 6px; /* 设置滚动条的宽度 */ } .el-table__body-wrapper::-webkit-scrollbar-thumb { background-color: #ccc; /* 设置滚动条的颜色 */ } .el-table__body-wrapper::-webkit-scrollbar-track { background-color: #f5f5f5; /* 设置滚动条的背景色 */ } ``` 将以上代码添加到你的样式文件中，然后给el-table组件添加一个class，例如：`scrollable-table`。然后在el-table组件上添加该class，即可修复错位问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值