elementui table固定列的时候，滚动条被遮挡无法拖动

最新推荐文章于 2024-08-14 10:47:25 发布

程序媛-静儿

最新推荐文章于 2024-08-14 10:47:25 发布

阅读量2.7k

点赞数 3

分类专栏： vue

本文链接：https://blog.csdn.net/qq_36711388/article/details/118359916

版权

当ElementUI的el-table使用固定列时，滚动条会被遮挡导致无法拖动。解决办法是修改el-table__body-wrapper的样式层级，避免固定列高度覆盖滚动条。这种方法适用于含有合计的table，但可能引入阴影效果。另一种方案是自定义合计行，通过在el-table内添加div实现，自行计算需要合计的列。

摘要由CSDN通过智能技术生成

elementUI的el-table左固定列把底部滚动条覆盖导致拖动无效，是因为左边固定表格部分高度覆盖了左边表格的滚动条高度，因此无法拖动，这时候我们只需要改变固定表格区域的高度。
在这里插入图片描述
代码如下：

<style lang="scss" scoped>
  .el-table {
   
    /deep/.el-table__fixed {
   
      height:auto !important; // 此处的important表示优先于elem

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

程序媛-静儿

关注关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue2 - 解决 iView 表格组件 Table 滚动条无法拖动问题，表格固定列时滚动条失效导致拖拽没反应，把表格的某列固定后横向或纵向滚动条无法滚动的问题处理（有合计行或固定时导致失效无法拖曳）

王佳斌

07-14

2612

iview，vue，表格组件，table，滚动条，无法拖曳，拖动，无效，不生效，没反应，table固定列后,进度条无法拖拽iview固定列导致滚动条失效，也不报错，样式，无法覆盖，deep，iview table组件当固定高度后，fixed某一列会出现盖住滚动条的情况，滚动条始终位于可视区域的实现，详细解决方案，如何解决这个问题，样式覆盖依然报错，无法滚动，鼠标拖住不动，设置固定列，横向滚动条在固定列的位置上无法滚动的问题，vue2 iview表格固定后滚动条无法拖动，解决iview带合计行表格固定列后滚动

Vue3 - 解决 iView 表格组件 Table 滚动条无法拖动问题，表格固定列时滚动条失效导致拖拽没反应，把表格的某列固定后横向或纵向滚动条无法滚动的问题处理（有合计行或固定时导致失效无法拖曳）

王佳斌

07-14

2679

vue3，iview，表格组件，table，滚动条，无法拖曳，拖动，无效，不生效，没反应，无法滚动，鼠标拖住不动，设置固定列，横向滚动条在固定列的位置上无法滚动的问题，vue3 iview表格固定后滚动条无法拖动，解决iview带合计行表格固定列后滚动条无法拖拽的问题，table固定列后,进度条无法拖拽iview固定列导致滚动条失效，也不报错，样式，无法覆盖，deep，iview table组件当固定高度后，fixed某一列会出现盖住滚动条的情况，滚动条始终位于可视区域的实现，详细解决方案，如何解决这个问题

1 条评论您还未登录，请先登录后发表或查看评论

el-table-fixed滚动条被遮挡与数据列错位解决方案

weixin_44328764的博客

10-20

2761

1. 滚动条被固定列遮挡导致无法拖动 >>>.el-table__fixed-right, >>>.el-table__fixed { height: auto !important; bottom: 6px !important; // 6px为预留的滚动条高度 } 2. 数据列错位问题 pageSize改变可能会导致数据列与固定列发生错位现象解决方法，在请求数据返回后调用列表的doLayout方法 this.$nex

【el-table】横向滚动条加粗后，滚动到固定列下被遮挡，已解决

热门推荐

qq_37289115的博客

03-03

1万+

当我们使用element table，有时我们需要部分的列固定，我们就给列添加了 fxied属性，但是这时候你会发现table的横向滚动条根本拖不动，只能在固定列外面靠点击来让它过来。查找原因你会发现原来是固定的列把滚动条给挡住了，只有超出固定的部分滚动条才可以拖动。解决办法： 1.修改el-table__fixed样式 .el-table { .el-table__fixed { height:auto !important; bottom:17px !import

Elementui table使用fixed参数固定列导致下方拖动条被遮挡无法拖动

weixin_43229695的博客

12-02

1360

解决elementui的table使用固定列遮挡下方拖动条问题

【VUE+ElementUI】el-table表格固定列el-table__fixed导致滚动条无法拖动

sunshineTing2的博客

04-03

1692

当设置了几个固定列之后，点击左侧滚动条却被遮挡

QT表格固定第一列，拖动时第一列不会遮挡

04-02

在实际编码过程中，你可能还需要处理一些边缘情况，例如，确保在表格内容不足以填充整个窗口时，仍然保持第一列固定。这可能需要对表格的几何属性进行额外的检查。标签“QT 表格固定列”进一步强调了这个主题，...

el-table设置列fixed时X轴滚动条无法拖动问题

qq_44741577的博客

02-24

576

属性，让列可以固定，不随着滚动条滚动移动，结果发现设置后，拖动横向的滚动条的前半部分无法拖动。后来发现原因是设置了。组件时，给表格的某些列设置了。属性用来控制一个元素。

element-ui table 组件 fixed 布局遮盖滚动条

qq_36437172的博客

10-27

4904

问题描述：在 element-ui 的 table 组件中，给前两列设置了 fixed 属性，让前两列可以固定，同时设置操作列固定在右侧，不随着滚动条滚动移动，结果发现设置后，固定列的滚动条被遮挡了一部分。效果图如下：解决方案： .el-table__fixed, .el-table__fixed-right { height: auto !important; // 让固定列的高自适应，且设置!important覆盖ele-ui的默认样式 bottom: 10px !importa

ElementUI el-table 固定列之后，横向滚动条在固定列的位置上无法滚动的问题

m0_60913515的博客

01-03

1339

【代码】ElementUI el-table 固定列之后，横向滚动条在固定列的位置上无法滚动的问题。

element-ui el-table 列设置fixed属性后 X轴滚动条无法拖动

wlcsoft的专栏

09-14

732

el-table组件列设置fixed固定列后，横向滚动条靠固定列部分失效。，常用的关键字有 auto 和 none。属性用来控制一个元素。添加如下CSS 样式。

前端开发之el-table(vue2中）固定列fixed滚动条被固定列盖住

m0_50207524的博客

04-08

976

在使用fixed固定列的时候会出现滚动条被盖住的情况。

el-table, .el-table__fixed-right左固定列挡住底部滚动条的解决方法

weixin_43582723的博客

12-10

1017

el-table, .el-table__fixed-right左固定列挡住底部滚动条的解决方法。

elementui table去掉最后一列滚动条的单元格border和背景

05-25

您可以通过以下方式来去掉 ElementUI 表格中最后一列滚动条的单元格 border 和背景： 1. 给表格添加一个自定义的 class，例如 "my-table"。 2. 使用以下 CSS 样式来为该表格设置样式： ``` .my-table .el-table__...