el-table组件固定列处，X轴滚动条无法拖动

已于 2023-12-01 11:11:28 修改
阅读量945 收藏
点赞数 1
文章标签： vue.js 前端 elementui
于 2022-02-11 13:48:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41742576/article/details/122878911
版权
这篇博客主要讨论了在使用Vue的el-table组件时遇到的一个问题，即在固定列的情况下，水平滚动条无法正常拖动。作者通过修改组件样式`.el-table--scrollable-x.el-table__body-wrapper`，将其`z-index`属性设置为1，成功解决了这个问题。此解决方案可能对遇到类似问题的前端开发者有所帮助。
摘要由CSDN通过智能技术生成

el-table组件固定列处，X轴滚动条无法拖动，修改组件样式如下

.el-table--scrollable-x .el-table__body-wrapper {
  z-index: 1;
}
LNNY~
关注
Vue3 - Element Plus 表格组件 table 设置横纵滚动条样式，覆盖修改 el-table 表格固定宽高时滚动条的宽度、高度、颜色等（提供详细示例代码，解决各种样式覆盖失败问题）
王佳斌
02-21 3238
vue3，element plus，el-table，table表格组件，设置滚动条样式，修改覆盖滚动条颜色和宽度，element plus更改table表格滚动条样式，vue3修改el-table滚动条颜色高度宽度，设置表格滚动条样式，怎么设置element plus表格组件的滚动条宽高颜色，如何设置table固定高度时的滚动条样式，修改el-table滚动条样式不生效怎么办，如何修改表格Table组件中滚动条的样式，Element-plus中表格Table组件中滚动条样式修改，deep覆盖样式失败，滚动
antdesign vue组件问题（二）table 组件错位问题，滚动加载，行选中问题，树表格自定义节点图标
子非渔
02-27 6399
table 组件错位导致问题出现的原因很多； 1. 内容区超过td范围， ant 组件并不像ele 提供了 tool-tip展示， 解决办法：在每个单元格外包一层div 设置宽度 css 样式 处理成 文本溢出 省略号 代替显示 当然你回发现这样处理过后文本是不会超出了，但是错位问题还是没有解决。 2. index 列 和 check 列同时出现 会存在错位。 index 列 ant 是不支持 ...
Vue3-elementplus 表格组件 table 设置横纵滚动条样式，覆盖修改 el-table 表格固定宽高时滚动条的宽度、高度、颜色（详细示例代码，解决样式覆盖失败问题）
Lynn
03-27 2385
Vue3 Element Plus 表格组件 table 设置横纵滚动条样式，覆盖修改 el-table 表格固定宽高时滚动条的宽度、高度、颜色等（提供详细示例代码，解决各种样式覆盖失败问题）)
vxe-table table tooltip 超长无法显示完全 + 无法滚动问题
最新发布
汤一飞
07-26 610
根据上一步的发现, 想办法给 tooltip element 加上 onmousewheel 和 stopPropagation , 在 api 中找到 cell-mouseleave 事件, 测试发现鼠标离开单元格进入单元格触发的 tooltip 中也会触发此事件, 因此监听此事件, 在此事件回调中, 选中 tooltip , 加上。如果 cell mouseleave 时, 能判断 tooltip 即将消失, 则可以在此时重置 tooltip 的 scrollTop;
el-table实现固定列，及解决固定列导致部分滚动条无法拖动的问题
askuld的博客
07-05 1565
当数据量动态变化时，可以为 Table 设置一个最大高度。通过设置max-height属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。fixed属性：列是否固定在左侧或者右侧，true 表示固定在左侧；可选值：true, left, right。
el-table X轴方向（横向）滚动条默认滑到右边
qq_42174597的博客
07-01 4365
el-table 横向滚动条 默认滑到右边，修改原生属性 无法生效等问题。
解决 el-table 固定列 el-table__fixed 导致部分滚动条无法拖动的问题
Khada_Finger的博客
09-18 3288
关于 el-table 固定列无法拖动问题及解决方案。
ElementPlus el-table添加了height属性，但显示不了滚动条
m0_49256388的博客
06-30 2590
终于找到elementplus table不能显示滚动条的原因啦，大家快来看，跟网上的经验都不同！！
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
10-16
同时，为了隐藏水平滚动条，设置`overflow-x: hidden`。 ```css table tbody { display: block; height: 495px; overflow-y: auto; overflow-x: hidden; } ``` - **表头样式**：为了让表头固定，需要对`...
vue3+elementplus虚拟表实现拖拉列宽
黎小小的博客
03-22 2034
vue3+elementplus虚拟表el-table-v2官方只实现一些基本功能，如排序、固定列、合并组(列、行)等，没有像el-table一样实现拖拉列宽。自己仿el-table实现拖拉列宽（只实现拖拉列宽，不是拖拽换列功能）。如果另外要实现拖拽换列功能，可看看以下，例子是el-table 的，通过element-plus-table-dragable实现，也可以用在el-table-v2上试试，我这暂时没有尝试。
[前端练习]两个table左右移数据V1.0---jquery实现
03-31 1497
一、展现结果二、代码1.HTML代码<!DOCTYPE html> <html> <head> <title>两个table左右移数据</title> <meta charset="utf-8 text/html"> <script type="text/javascript" sr
Vue2实用组件集
m0_56376264的博客
11-21 250
Vue2实用组件集
el-table底部滚动条无法拖动问题解决
weixin_45677200的博客
02-16 2113
el-table中的el-table-column提供了一个fixed属性设置固定列，但是设置了之后发现表格的滚动条无法拖动了，通过F12定位到页面元素发现是滚动条被固定列生成的元素给覆盖了。 <style lang="scss" scoped> .el-table { .el-table__fixed { // 左固定列 height: auto !important; bottom: 18px; // 改为自动高度后，设置与父容器的底部距离，高度会动态改变
el-table 使用固定列时 x轴滚动条无法显示
fengzhishay的博客
12-23 959
1、f12，在网页上找到el-tabel的代码，找到class为“el-table__body-wrapper is-scrolling-left”的这个标签（一次次瞎找中发现跟这玩意儿有关），然后看css属性，发现.el-table--scrollable-x .el-table__body-wrapper样式开启了x轴滚动条，但是滚动条没有显示，所以大胆的猜测滚动条被遮盖住了。我的el-table使用固定列时x轴无法显示，可以确定我的列是超过table宽度的，y轴正常显示，但是x轴不显示。
ElementUI el-table 固定列之后，横向滚动条在固定列的位置上无法滚动的问题
m0_60913515的博客
01-03 1335
【代码】ElementUI el-table 固定列之后，横向滚动条在固定列的位置上无法滚动的问题。
el-table固定表头（设置height）出现内容过多时不能滚动问题
qq_42192641的博客
11-17 2357
解决：加一个div并设置其高度和overflow。主要原因是el-table没有div包裹。
element-ui el-table 列设置fixed属性后 X轴滚动条无法拖动
wlcsoft的专栏
09-14 732
el-table组件列设置fixed固定列后，横向滚动条靠固定列部分失效。，常用的关键字有 auto 和 none。属性用来控制一个元素。添加如下CSS 样式。
element - el-table动态设置高度？不滚动了？
Dark_programmer的博客
09-09 7280
element 动态设置table高度
antd表格a-table滚动失效。x轴滚动失效
Sunny_lxm的博客
04-19 2830
antd表格a-table滚动失效。x轴滚动失效 页面html代码如下。实现左右布局，左边侧边栏固定宽度，右边沾满剩余宽度
el-table固定列滚动错位
07-13
您好！对于 el-table 固定列滚动错位的问题，可能有几个原因导致。我可以提供一些常见的解决方法，请您尝试以下步骤： 1. 确保您的 el-table 组件的父容器有明确定义的宽度。如果父容器没有指定宽度，固定列可能会在滚动时错位。 2. 检查固定列的宽度设置。固定列应该有明确的宽度，可以通过设置 column 的 width 属性来实现。确保所有固定列的宽度总和等于表格的总宽度。 3. 如果固定列中包含了复杂的内容或组件，可能会导致滚动错位。请确保固定列中的内容不会影响到滚动行为，可以尝试简化固定列的内容。 4. 如果以上方法都无法解决问题，您可以尝试使用 el-table 的 scroll 方法来手动设置滚动条的位置，以确保固定列与滚动内容对齐。具体操作可以参考 Element UI 官方文档中的 "Table 滚动加载" 部分。 希望这些方法能帮助您解决 el-table 固定列滚动错位的问题！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值