ElementUI 表格设置冻结列后横向滚动条失效

最新推荐文章于 2024-08-19 10:46:37 发布
最新推荐文章于 2024-08-19 10:46:37 发布
阅读量1.2k 收藏 2
点赞数 1
分类专栏： Vue Element
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41154522/article/details/116780952
版权
Vue 同时被 2 个专栏收录
64 篇文章 3 订阅
订阅专栏
Element
29 篇文章 0 订阅
订阅专栏
这篇博客主要讨论了一个常见的前端开发问题——在使用Element UI库时，表格的固定列高度可能会覆盖横向滚动条，导致无法选择滚动条。作者提供了一个解决方案，通过修改CSS样式 `.el-table.el-table__fixed`，将其高度设置为 `auto` 并调整底部距离，从而确保横向滚动条可见。
摘要由CSDN通过智能技术生成

冻结列高度遮住了横向滚动条，导致选不中横向滚动条
解决：

.el-table .el-table__fixed {
  height: auto !important;
  bottom: 16px !important;
}
永不满足的求知者
关注
专栏目录
Vue2 - 解决 iView 表格组件 Table 滚动条无法拖动问题，表格固定列时滚动条失效导致拖拽没反应，把表格的某列固定后横向或纵向滚动条无法滚动的问题处理（有合计行或固定时导致失效无法拖曳）
王佳斌
07-14 2611
iview，vue，表格组件，table，滚动条，无法拖曳，拖动，无效，不生效，没反应，table固定列后,进度条无法拖拽iview固定列导致滚动条失效，也不报错，样式，无法覆盖，deep，iview table组件当固定高度后，fixed某一列会出现盖住滚动条的情况，滚动条始终位于可视区域的实现，详细解决方案，如何解决这个问题，样式覆盖依然报错，无法滚动，鼠标拖住不动，设置固定列，横向滚动条在固定列的位置上无法滚动的问题，vue2 iview表格固定后滚动条无法拖动，解决iview带合计行表格固定列后滚动
解决elementUI表格冻结列遮挡横向滚动条的问题
u010875133的博客
06-29 132
【代码】解决elementUI表格冻结列遮挡横向滚动条的问题。
table表格实现行、列冻结
aystnd
05-21 2174
客户要求实现对表格数据的头几行或者头几列进行冻结，即滚动时保持这几行/列不动，通过网上查找代码，参考已有的代码的思路，实现了可以任意对行、列进行冻结。 实现原理： 创建多个div，div之间通过css实现层叠，每个div放置当前表格的克隆。例如：需要行冻结时，创建存放冻结行表格的div，通过设置z-index属性和position属性，让冻结行表格在数据表格的上层。同理，需要列冻结时，创建...
el-table表设置固定列后，滚动条无法选中左右滑动
最新发布
Zxl_sir的博客
08-19 270
再给一个el-table表格设置左侧几个固定列后，发现横向滚动条在固定列下方的位置无法拖动，只有在非固定列的下方位置才可以拖动，这个问题在windows上用鼠标难以点击滑动，我在mac上由于使用触摸板滑动较多基本不会出现这个问题。问题出现原因：固定列将下方的滚动条盖住了，无法点击到滚动条触发滚动。初步解决方法：改变固定列高度，使滚动条暴露出来。
element-ui table表格 增加合计行 和 表格列固定之后 滚动条无法滚动
weixin_筱玉的博客
08-17 2613
滚动条无法滚动 自定义合计行
elementui的表格 设置了fixed属性以后希望横向滚动，但是没啥变化
qq_61604352的博客
07-08 129
将所有的column加上width 只要屏幕放不下 就会出现滚动条 可以左右拖动。其实就是没有把每一列设置宽度。
解决elementui table固定列的时候，滚动条被遮挡无法拖动的问题
yixiaojing527的博客
05-23 1154
另外解决高度错位也有样式代码,请看如下。在页面加上以上样式就OK了。
解决el-table锁定列后锁定列对应位置的横向滚动条无法拖动问题
weixin_42401141的博客
03-01 2157
elementui el-table 固定列 滚动条 失效 无法拖动
bootstraptable冻结列无效_Bootstrap Table 冻结列功能详解
weixin_39784460的博客
01-17 1334
这篇文章主要介绍了JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案,需要的朋友可以参考下前言：最近项目里面需要用到表格的冻结列功能，所谓“冻结列”，就是某些情况下表格的列比较多，需要固定前面的几列，后面的列滚动。遗憾的是，bootstrap table里自带的fixed column功能有一点bug，于是和同事讨论该如何解决，于是就有了这篇文章。一、起因回顾最...
html表格固定右侧列,jQuery锁定表头和固定列插件FixedTable
weixin_36039533的博客
05-31 1017
插件描述：fixedTable是普通table的一个变体，在后台管理中我们经常使用表格，一个表格会有很多的列，并且每一列的长度还必须那么长，可能最后一列会有很多的操作按钮，这就会导致有很多的列会换行，FixedTable就是其中的解决方案之一更新时间：2020-06-0323:53:07更新内容：jQuery版本表格宽度算法优化更新时间：2017/9/30 下午11:19:40更新说明：修复aj...
Qt开发经验总结
草上爬的博客
12-02 8262
增加了很多轮子，同时原有模块拆分的也更细致，估计为了方便拓展个管理。把一些过度封装的东西移除了（比如同样的功能有多个函数），保证了只有一个函数执行该功能。把一些Qt5中兼容Qt4的方法废弃了，必须用Qt5中对应的新的函数。跟随时代脚步，增加了不少新特性以满足日益增长的客户需求。对某些模块和类型及处理进行了革命性的重写，运行效率提高不少。有参数类型的变化，比如 long * 到 qintptr * 等，更加适应后续的拓展以及同时对32 64位不同系统的兼容。
Element 表格固定列横向滚动条无法拖动的问题解决
张兴华的博客
11-20 4393
在Element-UI中，当对表格列进行固定后，底部的横向滚动条就无法拖动了，主要的问题就是固定区域盖住了横向滚动条，解决的办法就是将固定区域底部留出一个滚动条高度的距离。 如下图所示为对固定列区域调整后的效果图： 下面是解决问题所需的代码： .el-table .el-table__fixed { height:auto !important; bottom:16px; } 需要注意的是，上面的代码需要放在全局的样式文件中才有效果。 码字不易，觉得有帮助的小伙伴记得点个赞鼓励下~
解决element-table 循环生成,固定列后滚动条失效左右无法拖动问题解决
xiaojian_521的博客
07-09 2198
解决element-table 循环生成,固定列后滚动条失效左右无法拖动问题解决
overflow-x横向滚动条不可滚动的原因
weixin_42342065的博客
12-14 1003
在工作中遇到一种比较特殊的情况，当div内容宽度超过外层div总宽度的时候添加横向滚动条overflow-x:auto，正常这样来操作是没有什么问题的，但是遇到一个很奇怪的问题，满足上面任何条件了，但是滚动条却滚动不了，原因排查后发现是因为。以上是遇到的比较奇葩的情况，在此记录下。
vue，elementui 冻结列希望得到同样的滚动效果
Zq
08-13 3536
今天一个奇葩的需求，假设冻结列属于A类数据，其他滚动列属于B类数据。 产品还有老板不断的增加A类是数据的列，已经严重挤到B类数据的生存了，如下示例截图，哈哈哈，实际情况我已经抠了很多边距字体了 上主菜 <template> <div class="table-2t" :style="{'padding-left':(leftWidth+rightOffs...
Element 中表格固定列后横向滚动条无法拖动
找师父的小白的博客
12-16 684
当我把表格当中前几列fixed=left的时候底下的滚动条会失效，直接无法拖动 如何解决？ .el-table .el-table__fixed { height:auto !important; bottom:16px; } 需要注意的是，上面的代码需要放在全局的样式文件中才有效果。 参考文章： https://blog.csdn.net/weixin_40629244/article/details/110506532 今天也是努力搬砖的小花????吖~ 就酱！啾咪????~
关于el-table的修改，冻结行列，首列合并，单元格色阶 Vue2
Shi_haoliu的博客
05-24 2372
1. 表格可以全屏放大 2. 表头冻结，左侧两列冻结，右侧一列冻结 3. 首列单元格合并 4. 第二列单元格点击和高亮 5. 最后一列冻结 6. 单元格色阶设置 7. 滚动条自定义 8. 列头也有合并 9. 表格的自适应 10. 单元格的表格线也是自己画的
57.elementU表格固定列在左侧或右侧不动
银河与猫的博客
08-10 5939
项目要求表格里前两列系统列、子系统列和最后一列操作列都需要固定住，在左右拉动水平滚动条时，这3列始终保持原来位置不动。 给前两列的<el-table-column>加上fixed="left"，给操作列加上fixed="right" <el-table-column prop="system" label="系统" fixed="left"></el-table-column> <el-table-column prop="subsystem" label="
冻结el-table横向滚动条
06-01
如果你想要冻结 `el-table` 的横向滚动条，可以使用 `el-table` 组件的 `scrollbar-width` 属性。 具体步骤如下： 1. 在 `el-table` 上添加一个 `scrollbar-width` 属性，例如 `scrollbar-width: 0;`。 2. 在 CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值