解决当使用element table fix column 固定列时，滚动条在固定列下方无法滚动

最新推荐文章于 2024-07-04 09:58:51 发布
最新推荐文章于 2024-07-04 09:58:51 发布
阅读量1.9k 收藏
点赞数
分类专栏： Vue element 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/worldmakewayfordream/article/details/109311060
版权
本文介绍了解决Element UI框架中Table组件固定列时滚动条无法正常滚动的问题。通过调整CSS样式，设置.z-index属性来确保滚动条可以正常工作。

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

解决当使用element table fix column 固定列时，滚动条在固定列下方无法滚动

在全局css中添加这行代码，提高滚动条在z轴的坐标

建议使用下面的代码，使用参考文章里面的代码会导致 右fix column的左边框消失

.el-table--scrollable-x .el-table__body-wrapper .el-table__body {
  z-index : 1;
}

下附参考文章链接：

参考文章

gridview 冻结行与列
kehua668的专栏
09-19 925
-----1.css引用： <link rel="stylesheet" href="css/tableStyle.css" /> <link rel="stylesheet" href="css/superTables.css" /> -----2.js引用： <script type="text/javascript" src="superTabl...
2024最新前端面试题(八股文)一阶段总结（html，css）!!!!新手必看必背!通俗易通!全面!全是干货！
shixindonga1226的博客
01-13 4861
•支持动画，只有全透明和不透明两种模式，只有 256 种颜色,适用于简单动画、徽标和简单图形等应用场景。•常见格式,采用有损压缩算法，保持图像质量的同时减小文件大小 ,体积较小，不支持透明，不支持动画采用无损压缩算法，体积也相对较小，支持透明背景，不支持动画一般会保存颜色及形状相对简单的图片，可任意放大图形显示，边缘异常清晰画质最好，文件太大，不利于网络传输谷歌开发的一种图片格式,较小的文件大小,较高图像质量,格式新,要考虑兼容性.
element-ui的table组件，给某些列设置了fixed属性后，滚动条无法拖动
棠樾的博客
07-24 406
问题：在使用element-ui的table组件时，给表格的某些列设置了fixed属性，让列可以固定，不随着滚动条滚动移动，结果发现设置后，拖动横向的滚动条的前半部分无法拖动。后来发现原因是设置了fixed属性的列(左侧的div)把滚动条覆盖了。 解决办法： .el-table__fixed { height:auto !important; // 让固定列的高自适应，且设置!impo...
element中的table固定左侧列之后，底部滚动轴不能滚动到最左侧
weixin_44632257的博客
10-27 553
添加css样式： .el-table--scrollable-x .el-table__body-wrapper { z-index : 1; }
el-table左侧固定操作列下滚动条不能滚动问题
m0_52769924的博客
04-08 564
出现原因：固定列层级覆盖问题。
element ui表格横向滚动条固定在表格最下面（vue）
weixin_44056717的博客
08-03 1174
element ui表格横向滚动条固定在表格最下面
DIV+CSS学习笔记总结篇
qianduan666a的博客
07-29 1040
DIV+CSS学习笔记总结篇 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位： web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望： 未来IT行业企业需求最多的人才 结合最新的html5抢占移动端的市场 自己创业做老板 随着互联网的普及web开发成为企业的宠儿和核心 web职业发展目标： 第一、梳理知识架构 负责内容的HTML 负责外观的css（层叠样式表） 负责行为
Elasticsearch6.4专题之17:SQL Access
天空之蓝的博客
11-10 717
SQL Access 文章目录SQL Access概述简介为什么选择Elasticsearch SQL本机集成没有外部零件轻巧高效入门Conventions and Terminology（约定和术语）Mapping concepts across SQL and Elasticsearch（SQL和ES的概念映射）SecuritySQL REST APISQL Translate APISQL ...
Python Unitest 自动化测试框架（V2.0）生成测试报告 发送邮件 excel用例数据驱动 接口自动化 Selenium 页面自动化 测试结果记录数据库
meiguopai1的博客
12-07 2289
自动化测试框架说明 框架结构 当前自动化测试框架结构如下图所示： 自动化测试项目结构 目录与文件作用如下： AutoTest：自动化测试项目 Lib：测试项目相关的公用代码 Projects：按项目存放测试程序及所需数据、产生的报告等文件 Projects目录： BaseTest：自动化测试的公共模块，如：登录、用户管理等。 IDC：用于存...
el-table, .el-table__fixed-right左固定列挡住底部滚动条的解决方法
weixin_43582723的博客
12-10 1119
el-table, .el-table__fixed-right左固定列挡住底部滚动条的解决方法。
elementUI之el-table左固定列把底部滚动条覆盖导致拖动无效
热门推荐
baidu_36583119的博客
07-25 1万+
解决办法： 代码： <style lang="scss"> .el-table { .el-table__fixed { height:auto !important; // 此处的important表示优先于element.style bottom:17px; // 改为自动高度后，设置与父容器的底部距离，则高度会动态改变 ...
elementUI table固定列底部滚动轴无法拖动问题
CuiCui_web的博客
01-13 685
解决方法： <style scoped lang="scss"> /deep/.el-table--scrollable-x .el-table__body-wrapper { z-index : 1; } </style>
el-table表格固定列el-table__fixed导致滚动条无法拖动
qq_44741577的博客
07-04 623
如何自定义修改滚动条。
ElementUI el-table 设置固定列，横向滚动条在固定列的位置上无法滚动的问题
博哥的二进制世界
09-07 4694
ElementUI el-table 设置固定列，横向滚动条在固定列的位置上无法滚动的问题
Element 表格固定列横向滚动条无法拖动的问题解决
张兴华的博客
11-20 4581
在Element-UI中，当对表格列进行固定后，底部的横向滚动条就无法拖动了，主要的问题就是固定区域盖住了横向滚动条，解决的办法就是将固定区域底部留出一个滚动条高度的距离。 如下图所示为对固定列区域调整后的效果图： 下面是解决问题所需的代码： .el-table .el-table__fixed { height:auto !important; bottom:16px; } 需要注意的是，上面的代码需要放在全局的样式文件中才有效果。 码字不易，觉得有帮助的小伙伴记得点个赞鼓励下~
el-table固定列之后滚动条无法拖动
qq_34263566的博客
04-07 1469
使用el-table的fixed属性固定表格列的时候滚动条被固定列覆盖部分无法拖动
使用elementUi表格固定列时，滚动条拖不动
菜鸡互啄的博客
03-15 2390
在使用elementUI中的表格组件时，因项目需求，需要使前三列固定，后面的列了可以滚动，所以使用了官网中的fixed属性，但使用后出现了问题，就是前三列宽度的滚动条无法拖动了,实际上是前三列把滚动条遮挡住了，记录在此： .el-table__body-wrapper{ z-index: 2 } 在<el - table></el - table>标签上添加此样式class即可解决，也许有些微的瑕疵，但能解决问题，无伤大雅。 ...
Element Plus使用table组件固定列时y轴不能滚动
最新发布
01-17
### Element Plus Table 组件固定列 Y 轴滚动问题解决方案 当使用 `el-table` 组件并设置某些列为固定时，可能会遇到 Y 轴滚动不顺畅或无法正常工作的情况。这通常是因为固定列覆盖了默认的滚动条区域，使得用户难以通过鼠标滚轮或其他方式触发垂直方向上的滚动。 为了有效解决这个问题，可以采取以下几种方法： #### 方法一：调整 CSS 样式 可以通过自定义样式来改变浏览器内置滚动条的行为，从而避免其被固定列遮挡。具体来说，就是修改 Webkit 浏览器下的滚动条外观属性[^2]。 ```css /* 修改整个页面内的所有滚动条 */ ::-webkit-scrollbar { height: 8px; } /* 针对表格内部的特定滚动条进行优化 */ .el-table__body-wrapper::-webkit-scrollbar { width: 8px; /* 如果是水平滚动条则应设height*/ } ``` 上述代码片段将使所有的滚动条变得更细更易操作，并且专门针对 `.el-table__body-wrapper` 下的滚动条进行了特别处理，确保即使存在固定列的情况下也能良好显示和交互。 #### 方法二：利用官方 API 进行布局控制 如果仅靠样式调整仍不能完全解决问题，则建议进一步探索 Element UI 提供的相关接口选项。例如，在初始化表格实例之后调用 `doLayout()` 函数重新计算表头与主体之间的相对位置关系，有助于修复因 DOM 变化引起的各种潜在渲染错误[^1]。 ```javascript this.$nextTick(() => { this.$refs.table.doLayout(); }); ``` 此段 JavaScript 代码会在下一次 DOM 更新周期结束后执行，强制刷新表格结构，进而可能改善由于固定列造成的视觉错位现象以及伴随而来的滚动障碍。 #### 方法三：检查数据源更新逻辑 有时候，Y 轴滚动失效并非由前端展示层面上的原因造成，而是因为后台返回的数据量过大或者加载机制不合理所致。因此还需要确认是否存在异步请求未完成就尝试访问尚未准备好的节点等问题。对于这种情况，应该适当增加缓冲时间或是分页获取记录数较多的结果集。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值