【elementui】记录el-table设置左、右列固定时，加大滚动条宽度至使滚动条部分被固定列遮挡的解决方法

最新推荐文章于 2025-03-07 12:12:15 发布
最新推荐文章于 2025-03-07 12:12:15 发布
阅读量1k 收藏
点赞数 4
分类专栏： elementUI 文章标签： elementui vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/bbt953/article/details/140664125
版权

当前elementui版本：2.8.2

  • 现象：此处el-table__body-wrapper默认的滚动条宽度为8px，我加大到10px，如果不设置fixed一切正常，设置fixed后会被遮挡一点
    在这里插入图片描述

  • el-table__fixed-right::before, .el-table__fixed::before
    在这里插入图片描述

  • 设置css解决遮挡

// 左固定列
.el-table__fixed {
   
	height: calc(100% - 10px) !important;
}

// 右固定列
.el-table__fixed-right {
   
	height: calc(100<
最低0.47元/天 解锁文章
Vue2 - 解决 iView 表格组件 Table 滚动条无法拖动问题，表格固定列时滚动条失效导致拖拽没反应，把表格的某列固定后横向或纵向滚动条无法滚动的问题处理（有合计行或固定时导致失效无法拖曳）
王佳斌
07-14 3045
iview，vue，表格组件，table，滚动条，无法拖曳，拖动，无效，不生效，没反应，table固定列后,进度条无法拖拽iview固定列导致滚动条失效，也不报错，样式，无法覆盖，deep，iviewtable组件当固定高度后，fixed某一列会出现盖住滚动条的情况，滚动条始终位于可视区域的实现，详细解决方案，如何解决这个问题，样式覆盖依然报错，无法滚动，鼠标拖住不动，设置固定列，横向滚动条在固定列的位置上无法滚动的问题，vue2iview表格固定后滚动条无法拖动，解决iview带合计行表格固定列后滚动
Vue3 - 解决 iView 表格组件 Table 滚动条无法拖动问题，表格固定列时滚动条失效导致拖拽没反应，把表格的某列固定后横向或纵向滚动条无法滚动的问题处理（有合计行或固定时导致失效无法拖曳）
王佳斌
07-14 3029
vue3，iview，表格组件，table，滚动条，无法拖曳，拖动，无效，不生效，没反应，无法滚动，鼠标拖住不动，设置固定列，横向滚动条在固定列的位置上无法滚动的问题，vue3iview表格固定后滚动条无法拖动，解决iview带合计行表格固定列后滚动条无法拖拽的问题，table固定列后,进度条无法拖拽iview固定列导致滚动条失效，也不报错，样式，无法覆盖，deep，iviewtable组件当固定高度后，fixed某一列会出现盖住滚动条的情况，滚动条始终位于可视区域的实现，详细解决方案，如何解决这个问题
【el-table】横向滚动条加粗后，滚动到固定列下被遮挡，已解决
花椒和蕊的博客
08-14 1099
我尝试了几种方法都不行，比如找到.el-table__fixed-right .el-table__fixed-footer-wrapper ，修改bottom的值，无效。横向滚动条按要求加粗后，遇到的问题：列表的操作列是固定在最右侧的，当滚动条滑动到最右侧的时候，滚动条被遮挡了。如截图所示，普通列body的高度是362px（含横向滚动条12px的高度）固定列body的高度等于普通列body的高度 - 横向滚动条的高度。看红色圈起来的部分，固定列的body高度其实超了，所以挡住了滚动条。
elementui table固定列的时候，滚动条被遮挡无法拖动
qq_36711388的博客
06-30 2966
elementUI的el-table左固定列把底部滚动条覆盖导致拖动无效，是因为左边固定表格部分高度覆盖了左边表格的滚动条高度，因此无法拖动，这时候我们只需要改变固定表格区域的高度。 代码如下： <style lang="scss" scoped> .el-table { /deep/.el-table__fixed { height:auto !important; // 此处的important表示优先于element.style bottom:17px
el-table（elementui）表格合计行使用以及滚动条默认样式修改
最新发布
m0_62508027的博客
03-07 658
el-table使用合计行、解决横向滚动条显示在合计行上面的问题、修改滚动条默认样式
[element-ui] el-table组件滚动条的宽度设置
qq_14993591的博客
03-12 1718
【代码】[element-ui] el-table组件滚动条的宽度设置。
vue+elementui的el-table固定列会遮住横向滚动条及错位问题
qingtian_46的博客
11-21 508
解决方案最右侧固定列，class名称是.el-table__fixed-right, 左侧固定，class名称是.el-table__fixed。如果没有解决错位， 查看el-table__body-wrapper是否写了max-height的样式属性， 这会影响固定列定位的。2、固定列往上提滚动条的高度。1、防止固定列表格高度错位。
el-table右边和底部滚动条太粗了，如何调整滚动条宽度？
weixin_47415511的博客
02-29 1492
el-table滚动条调整
el-table fixed 区域 盖住滚动条解决
我的博客
11-02 511
【代码】el-table fixed 区域 盖住滚动条解决。
【VUE+ElementUI】el-table表格固定列el-table__fixed导致滚动条无法拖动
sunshineTing2的博客
04-03 2242
当设置了几个固定列之后，点击左侧滚动条却被遮挡
element table固定头部兼容ie的滚动条样式自定义
04-09
element table固定头部ie的滚动条样式自定义，element table固定头部ie的滚动条样式自定义，element table固定头部ie的滚动条样式自定义，element table固定头部ie的滚动条样式自定义，element table固定头部ie的...
element-ui中处理el-table固定列时最后一行被遮挡
lwg112233的博客
12-28 1941
1.定义js文件中自定义 fixtable 方法 import Vue from 'vue'; let setHeightFun = (el) => { // 外层表格dom let eltableDom = el;//'el'即'el-table' let bodyDom = el.querySelector('.el-table__body-wrapper');//滚动轴dom // 固定列表格dom let fixedDom = el.querySelector('.
elementui中的el-table，当使用fixed属性时，table主体会遮挡住滚动条的大半部分，导致很难选中。
RumbleWx的博客
12-19 1305
table加个类，这里取为class="table"
解决element-table 循环生成,固定列后滚动条失效左右无法拖动问题解决
xiaojian_521的博客
07-09 2343
解决element-table 循环生成,固定列后滚动条失效左右无法拖动问题解决
el-table实现固定列，及解决固定列导致部分滚动条无法拖动的问题
askuld的博客
07-05 2672
当数据量动态变化时，可以为 Table 设置一个最大高度。通过设置max-height属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。fixed属性：列是否固定在左侧或者右侧，true 表示固定在左侧；可选值：true, left, right。
el-table(vue2中）滚动条被固定列盖住
qq_30306717的博客
10-26 2681
el-table(vue2中）滚动条被固定列盖住 修复
解决elementui table固定列的时候，滚动条被遮挡的问题（适用合计）
lovlin_l的代码世界
01-08 5975
前段时间突然发现，当固定table列的时候，右侧的滚动条会被折腾，而不能拖动，上图 以前的时候固定列都是在右侧，也没有注意到这种问题，上次放到左侧，才发现拖不了了，上官方issues上找到了问题所在，官方的bug 方案一通过设置css属性.el-table__body-wrapper{z-index: 2}就可以了，但是有个小问题就是右侧浮动，中间的部分，失去了阴影，感觉没有分离开 https://github.com/ElemeFE/element/issues/20515 方案二.
elementUI el-table固定列覆盖滚动条问题
WangYJE的博客
12-10 1455
今天遇到了这个问题，看了一下都是通过修改css解决的，写死的感觉不太妥当，测试了一下el-table提供的方法，有个新的解决方案如下： ...
解决elementui 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
当el-table中的固定列在没有显示滚动条的情况下如何避免遮挡正常数据显示？
11-15
当在Vue.js的`el-table`组件中使用固定列并且不需要滚动条时，可以调整表格的高度使其正好填充容器，防止固定列遮挡正常数据。这里有几个步骤可以实现： 1. **设置表格高度**：给`el-table`添加一个动态计算的高度，通常是基于父元素的`clientHeight`，例如： ```html <el-table :style="{ height: 'calc(100% - 48px)' }" :fixed-header="true"> <!-- ... --> </el-table> ``` 这里的`48px`通常代表表头的高度，具体数值可能会因UI样式而变化。 2. **处理窗口大小变化**：如果你的应用支持响应式布局，当窗口大小发生变化时，需要同步更新表格的高度，可以监听窗口的`resize`事件： ```javascript new Vue({ el: '#app', data() { return { tableHeight: window.innerHeight - 48 // 初始高度减去表头高度 } }, mounted() { window.addEventListener('resize', this.updateTableHeight); }, beforeDestroy() { window.removeEventListener('resize', this.updateTableHeight); }, methods: { updateTableHeight() { this.tableHeight = window.innerHeight - 48; this.$refs.tableElement.style.height = `${this.tableHeight}px`; } } }); ``` 这里假设`tableElement`是你想要操作的`el-table`的引用。 通过这种方式，你可以确保固定列不会遮挡正常的数据行，同时保持了良好的视觉体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值