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

最新推荐文章于 2024-10-17 15:28:14 发布
最新推荐文章于 2024-10-17 15:28:14 发布
阅读量1.1k 收藏 1
点赞数
文章标签： elementui vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yixiaojing527/article/details/130829381
版权
通过添加特定的CSS样式，可以调整ElementUI中的el-table组件，包括设置固定列的高度自动适应，避免底部错位，以及处理固定列高度错位问题，特别是与滚动条相关的8px间隙。这些样式修改涉及到了.z-index、background-color和padding-bottom的调整。
摘要由CSDN通过智能技术生成 
// ::v-deep .el-table {
//     .el-table__fixed {
//       height:auto !important;
//       bottom:10px !important;
//     }
//   }
//  ::v-deep .el-table__body-wrapper{
//        z-index: 2
// }

在页面加上以上样式就OK了

另外解决高度错位也有样式代码,请看如下

/deep/ .el-table__fixed-right-patch {
  background-color: transparent;
}
/deep/ .el-table__fixed-right::before,
/deep/ .el-table__fixed::before {
  background-color: transparent;
}
// 解决固定列高度错位问题 8px与滚动条高度相等
/deep/.el-table__fixed-body-wrapper .el-table__body {
  padding-bottom: 8px!important;
}

yixiaojing527
关注
Vue3 - 解决 iView 表格组件 Table 滚动条无法拖动问题，表格固定列时滚动条失效导致拖拽没反应，把表格的某列固定后横向或纵向滚动条无法滚动的问题处理（有合计行或固定时导致失效无法拖曳）
王佳斌
07-14 2761
vue3，iview，表格组件，table，滚动条，无法拖曳，拖动，无效，不生效，没反应，无法滚动，鼠标拖住不动，设置固定列，横向滚动条在固定列的位置上无法滚动的问题，vue3 iview表格固定后滚动条无法拖动，解决iview带合计行表格固定列后滚动条无法拖拽的问题，table固定列后,进度条无法拖拽iview固定列导致滚动条失效，也不报错，样式，无法覆盖，deep，iview table组件当固定高度后，fixed某一列会出现盖住滚动条的情况，滚动条始终位于可视区域的实现，详细解决方案，如何解决这个问题
el-table-fixed滚动条被遮挡与数据列错位解决方案
weixin_44328764的博客
10-20 2883
1. 滚动条被固定列遮挡导致无法拖动 >>>.el-table__fixed-right, >>>.el-table__fixed { height: auto !important; bottom: 6px !important; // 6px为预留的滚动条高度 } 2. 数据列错位问题 pageSize改变可能会导致数据列与固定列发生错位现象 解决方法，在请求数据返回后调用列表的doLayout方法 this.$nex
element--el-table添加合计后固定列x轴滚动条无法滚动问题
m0_50207524的博客
06-16 701
改变固定列滚轮高度问题。
解决Vue项目中使用better-scroll无法正常滚动
奶油糖霜的博客
07-30 656
问题描述： 最近在写Vue项目中，由于是移动端开发。为了改善原生滑动在移动端的流畅性问题，于是用了一个小工具better-scroll。但在Vue项目中封装scroll模块时，发现并不能正常滚动（无法滑动）。 import BScroll from 'better-scroll' export default { data() { return { scroll: null } }, mounted() { this.scroll = new BScroll(
解决elementui table固定列的时候，滚动条被遮挡的问题（适用合计）
lovlin_l的代码世界
01-08 5816
前段时间突然发现，当固定table列的时候，右侧的滚动条会被折腾，而不能拖动，上图 以前的时候固定列都是在右侧，也没有注意到这种问题，上次放到左侧，才发现拖不了了，上官方issues上找到了问题所在，官方的bug 方案一通过设置css属性.el-table__body-wrapper{z-index: 2}就可以了，但是有个小问题就是右侧浮动，中间的部分，失去了阴影，感觉没有分离开 https://github.com/ElemeFE/element/issues/20515 方案二.
前端开发之el-table(vue2中）固定列fixed滚动条被固定列盖住
m0_50207524的博客
04-08 1013
在使用fixed固定列的时候会出现滚动条被盖住的情况。
elementui table固定列的时候，滚动条被遮挡无法拖动
qq_36711388的博客
06-30 2817
elementUI的el-table左固定列把底部滚动条覆盖导致拖动无效，是因为左边固定表格部分高度覆盖了左边表格的滚动条高度，因此无法拖动，这时候我们只需要改变固定表格区域的高度。 代码如下： <style lang="scss" scoped> .el-table { /deep/.el-table__fixed { height:auto !important; // 此处的important表示优先于element.style bottom:17px
QT表格固定第一列，拖动时第一列不会遮挡
04-02
在实际编码过程中，你可能还需要处理一些边缘情况，例如，确保在表格内容不足以填充整个窗口时，仍然保持第一列固定。这可能需要对表格的几何属性进行额外的检查。 标签“QT 表格固定列”进一步强调了这个主题，...
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固定列的时候，滚动条被遮挡的问题
最新发布
weixin_50206068的博客
10-17 131
【代码】解决elementui table固定列的时候，滚动条被遮挡的问题。
el-table设置fixed后会遮挡横向滚动条
shmily_1216的博客
07-06 323
让事件穿透到滚动条上面去就好了。
vue2+elementui的el-table固定列会遮住横向滚动条以及错位
AzeShinja的博客
01-09 1583
我是最右侧固定列，所以下面的class名称是。的样式属性， 这会影响固定列定位的。, 如果有左侧固定请自行替换为。如果还没有解决错位， 请看你的。留出了高度并且高度一致没有错位。
el-table滚动条被挡住的问题
weixin_71287951的博客
09-28 1059
el-table设置fixed属性，滚动条被挡住的问题
elment table 固定列遮挡横向滚动条
weixin_43907110的博客
01-14 303
解决方法，设置固定列高度为100%-滚动条高度。滚动条高度比较高的话，会被固定列遮挡住。
el-table(vue2中）滚动条被固定列盖住
qq_30306717的博客
10-26 2490
el-table(vue2中）滚动条被固定列盖住 修复
elementUI table fixed设置后，表格无法对齐，滚动条被覆盖（亲测有用）
xiaoxin_su的博客
12-15 5358
elementUI table fixed设置后，表格无法对齐，滚动条被覆盖（亲测有用）
vue使用Better-Scroll无法拖动
Bernie_7的博客
04-15 549
vue使用Better-Scroll无法拖动 学习vue的时候，写移动端的页面，使用Better-Scroll的时候因为办法引发的惨案！ 我使用的是2.x的版本，然而学习的时候是1.x的版本，我并不知道，写完发现无法滚动了。 百度了，有人说是子组件的高度大于父组件的高度。 于是，我查看了高度，确实如此，于是限定了高度。发现还是不行。 然后继续百度。。。基本试遍了所有的方法。 最后问了道友，他问我是不是2的版本，我说应该是吧，我命令行安装的，都是最新的版本。然后给我一个图，让我把这个加上。在此我就放他的图了
elementui table去掉最后一列滚动条的单元格border和背景
05-25
您可以通过以下方式来去掉 ElementUI 表格中最后一列滚动条的单元格 border 和背景： 1. 给表格添加一个自定义的 class，例如 "my-table"。 2. 使用以下 CSS 样式来为该表格设置样式： ``` .my-table .el-table__fixed-right-container tbody tr:last-child td { border-right: none; background-color: transparent; } ``` 这段 CSS 样式会选择表格中最后一列滚动条右侧的所有单元格，然后将它们的右边框和背景色都设置为透明。 请注意，这个方法只会移除滚动条右侧的单元格的 border 和背景色，而不是整个表格的。如果您想要完全移除表格的 border 和背景色，可以将 `.el-table` 的 border 和 background-color 设置为 none。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值