element Table 滚动条首次进入不显示、偶尔切换页面后不显示，刷新当前页或改变窗口才显示

最新推荐文章于 2025-10-12 23:33:22 发布
原创 最新推荐文章于 2025-10-12 23:33:22 发布 · 1.3k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

博主被el-table滚动条样式问题困扰许久，尝试他人固定滚动条的方法未成功。后咨询ChatGPT，得到在el-table里添加style=\min-width: calc(100%-10px);\的解决方案，亲测可行，并分享给大家。

这几天被这个问题困惑很久，找了别的大佬改样式直接把滚动条固定，但我自己一直没试成功。

后来想着找chat gpt问问，直接给出简单的答案，我试了以下，没想到居然行了emmmmm。

就是在el-table里加style="min-width: calc(100%-10px);"  给一个min-width就行了说是emmmm。。

<el-table style="min-width: calc(100%-10px);margin-top:15px"></el-table>

 这是我自己的一个问题，不知道能不能帮助大家，可以试试。

vxe-table 使用过程中的bug，实时更新（置顶）
IT博客技术分享
05-17 1万+
1. 由于vxeTable 使用了font-awesome字体图标， 但是官方文档没有详细告诉你怎么引入使用，所以很多小伙伴都找不到原因。 解决办法：第一步安装依赖 npm install font-awesome --save 第二步引入依赖样式文件 在main.js文件中引入 //引入font-awesome import 'font-awesome/css/font-awesome.css'; 使用： <vxe-button size="mini" status="su..
已解决：element Table 滚动条首次进入不显示、偶尔切换页面后不显示，刷新当前页或改变窗口才显示
felicity_zll的博客
05-16 6242
记录一下在项目中遇到的问题，困扰了几天最终解决了。 一、问题：element Table 滚动条首次进入不显示、偶尔切换页面后不显示，刷新当前页或改变窗口才显示。 1、首次进入的效果 可以看到滚动条并没有渲染出来，但是刷新页面或者改变窗口大小。又会出现。 最后一点点查看DOM元素、发现了问题： 这是无滚动条首行最后一个单元格：； 这是又有滚动条首行最后一个单元格：； 然后再改下这个属性： 二、解决 直接在css中添加： //显示滚动条 /deep/ .el-table--scrolla
el-table中滚动条不显示(解决办法)
weixin_38345306的博客
10-21 8512
原因：样式height设置错误 错误写法： //height写在了style中 <el-table style="width: 100%, height:100%" > 正确写法： element-ui官方文档显示height为el-table的属性 <el-table style="width: 100%;" height="100%">
前端界面不会在浏览器上显示。
最新发布
raB_3lre的博客
10-12 383
前端界面在浏览器中不显示的问题可能由多种因素引起，包括HTML结构错误、CSS样式问题、JavaScript错误或资源加载失败。以下是一些常见原因及其解决方案。前端界面在浏览器中不显示的问题可能由多种因素引起，包括HTML结构错误、CSS样式问题、JavaScript错误或资源加载失败。外部资源（如CSS、JavaScript文件或图片）加载失败可能导致页面显示异常。外部资源（如CSS、JavaScript文件或图片）加载失败可能导致页面显示异常。JavaScript代码中的错误可能导致页面渲染中断。
vue el table 不出滚动条样式显示 is_scrolling-none，如何修改？
种麦南山下的博客
01-07 1610
打开浏览器的开发者工具，查看控制台是否有任何与Element UI或Vue相关的警告或错误。确保你使用的Vue和Element UI/Plus版本是兼容的。组件需要在一个具有固定高度的容器中才能正确显示滚动条。如果容器高度是动态的或者没有设置，滚动条可能不会出现。在Vue项目中，如果你使用的是Element UI（现已更名为Element Plus，针对Vue 3）的。，这通常意味着表格内容没有超出其容器的高度，因此不需要滚动条。组件，并且发现表格没有显示滚动条，同时样式显示为。元素上，而不是它的容器。
element-ui el-scrollbar滚动条初始化不显示
woniuyibuyibu的博客
12-08 1819
el-scrollbar滚动条打开有时候不显示问题
el-table表格组件中的滚动条首次进入页面不显示，第二次进入页面时才会显示
qq_49017797的博客
08-17 941
el-table表格组件中首次点击左侧页面的导航或者点击右侧页面下面的分页，导航条都不显示，第二次点击或者偶尔切换页面时才会显示导航条。
elementPlus 表格切换当多table切换时，表头宽度受到影响
06-06
参考引用[1]中的方法：在窗口大小改变时调用doLayout，那么我们可以尝试在表格切换后（也就是表格显示后）手动调用doLayout。具体步骤：1.为每个表格设置ref，注意每个表格的ref应该是唯一的。2.在切换表格的方法中...
加载TemplateEditor文件时，显示报错加载XML文件失败：notebook object has no attributr title
08-27
但是，我们也要注意，在ConfigUpdaterApp中，我们可能希望在其他操作时改变标题（比如切换到其他选项卡时恢复为原来的标题），但这里我们不做处理，因为需求不明确。 我们只修改加载文件时的标题设置。 同时，...
表格页面换页晃动
07-17
然而，在某些情况下（例如上下滚动条的出现或消失），会导致列宽反复调整，从而引发视觉上的抖动[^1]。 - **数据刷新导致重绘**：当分页数据更新时，如果新数据的内容结构发生变化，或者加载过程中未正确处理 DOM ...
刚进el-table横向滚动条不显示 切换页面 刷新当前页面才会显示
weixin_54007650的博客
08-14 827
就在我被这个问题恶心的时候，突然想到是不是因为宽度设置100%，切换的时候宽度没有变化没反应过来。用这个值来设置宽度，两个宽度有一个极小的变化。随即设置了表格的宽度样式，发现现在切换中英文x轴滚动条就不会消失了。同理如果不是切换语言引起的滚动条消失，而是一进入页面就没有滚动条，切换页面或者刷新页面才会出现时。进入页面时，稍微迟一会儿重新设置差异较小宽度。今天测试突然提到当系统切换语言的时候，如果页面刚好在有横向滚动条的页面时。滚动条会消失，但是切换页面或者刷新当前页面滚动条就会出现。
Element-table 滚动条没有显示，但是可以鼠标滚轮下滑 --一定要试一下（网上大部分解决方法均无果）
weixin_51998255的博客
06-25 2463
使用的element版本为2.8.2，其他版本大概率也是这种解决方案。网上查找该问题，设置了hieght，也把table样式分开写到了style中，试了好多都没有解决。2.找到滚动条的样式设计 （我的就在第一个特别好找），可以看到项目自动设置滚动条的高和宽为零。照着网上的所有方法都试了一遍，无果。最后没办法一个一个文件排查出来了这个问题，希望可以帮助到遇到这个问题的同学。1.找到你的设置滚动条样式的css文件。你的项目本地css架构中大概率设置了滚动条框长宽为零，所以显示不出来滚动框。
el-table横向滚动条不失效问题，页面缩小滚动条不展示
wtta.
02-27 873
el-table横向滚动条不失效问题，页面缩小滚动条不展示
element table不出现滚动条
weixin_63966374的博客
08-04 1900
element table 滚动条问题
el-scrollbar滚动条不显示
m0_50923870的博客
08-22 2275
出现这样情况的主要原因为，页面开始渲染时内容并没有撑开el-scrollbar内容，所以不会显示滚动条。解决方法为使用其内置的update()方法 更改内容后对scrollbar进行更新。滚动条就可以正常显示了。动态添加标签发现滚动条不能正常显示，但是标签可以滚动。
el-table横向滚动条不显示
找师父的小白的博客
05-16 3654
在Vue中使用el-table，设置表格高度和宽度后，表格内容超出，横向滚动条没有显示，无法拖动。
css距离顶部高度_使用vue实现ElementUI中的Backtop回到顶部
weixin_39526872的博客
11-20 484
一、前言elementUI有说明文档，但我为什么还要重新写一下呢？因为文档也有坑，一开始使用时你复制进去，可能都没有效果。也不知道原因在哪，就如Backtop回到顶部的组件，不去看源码，真心不知道是怎么个所以然。一开始，我把这个组件放到我页面的底部，结果是无效果的，而且还会报css的这两个样式错误(.page-component__scroll .el-scrollbar__wrap)，看完这个文...
vue项目 解决el-table自适应高度,vue页面不显示多条滚动条，超出的部分让el-table内部出现滚动条（推荐使用第二种解决方案；TAdaptivePage 组件新增左右分栏布局）
热门推荐
wocwin的博客
04-24 2万+
vue项目 解决el-table自适应高度,vue页面不显示多条滚动条，超出的部分让el-table内部出现滚动条（推荐使用第二种解决方案）
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值