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

最新推荐文章于 2024-08-30 19:07:11 发布
最新推荐文章于 2024-08-30 19:07:11 发布
阅读量2.7k 收藏 3
点赞数 3
分类专栏： elementui vue 文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44328764/article/details/120862367
版权
本文介绍了在使用ElementUI的el-table组件时遇到的两个问题：1) 滚动条被固定列遮挡，导致无法正常拖动；2) 页面大小改变时，数据列出现错位。针对这些问题，提出了相应的解决方案，即在数据请求返回后调用列表的doLayout方法来修复列的布局。
摘要由CSDN通过智能技术生成

1. 滚动条被固定列遮挡导致无法拖动

 >>>.el-table__fixed-right, >>>.el-table__fixed {
   
        height: auto !important;  
        bottom: 6px !important; // 6px为预留的滚动条高度
最低0.47元/天 解锁文章
喝咖啡还是泡茶
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
elementui table固定列的时候，滚动条被遮挡无法拖动
qq_36711388的博客
06-30 2723
elementUI的el-table左固定列把底部滚动条覆盖导致拖动无效，是因为左边固定表格部分高度覆盖了左边表格的滚动条高度，因此无法拖动，这时候我们只需要改变固定表格区域的高度。 代码如下： <style lang="scss" scoped> .el-table { /deep/.el-table__fixed { height:auto !important; // 此处的important表示优先于element.style bottom:17px
elementUI table fixed设置后，表格无法对齐，滚动条被覆盖
Ja_dream的博客
06-16 736
表格滑动到最后一行后出现无法对齐的情况，这个问题主要是滚动条的原因，因为你设置了::-webkit-scrollbar{ width:1px;}，即：滚动条的width和height不一致导致的，设置成一样的就好了。注：本项目所有的el-table表格的滚动条都增加了高度，故解决方法都是写在全局样式里面，请根据实际情况，修改相应的样式。2、table开启fixed功能后，上下滚动行无法对齐。滚动条被覆盖，导致被覆盖部分没办法拖动。1. 设置公共样式，将被遮罩部分减少。1. 通过css样式，修改表格样式。
ElementUI el-table 解决使用固定列出现滚动条时，行列对不齐、滚动条被遮挡、表头“样式穿透”问题
最新发布
hrcsdn13的博客
08-30 170
ElementUI el-table 解决使用固定列出现滚动条时，行列对不齐、滚动条被遮挡、表头“样式穿透”问题
el-table fixed固定列导致错位的解决方法介绍
风中追风
07-17 1575
Element UI table组件可以通过设置fixed=right属性实现列的固定，但是在某些情况下会导致固定列的样式错乱,只要刷新页面即出现表格错位问题,下面就总结下解决样式错乱实现方案。就可以解决错位问题了，到此这篇关于el-table fixed固定列导致错位的解决方法的文章就介绍到这了。对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法。
element--el-table添加合计后固定列x轴滚动条无法滚动问题
m0_50207524的博客
06-16 584
改变固定列滚轮高度问题。
【el-table】横向滚动条加粗后，滚动到固定列下被遮挡，已解决
花椒和蕊的博客
08-14 548
我尝试了几种方法都不行，比如找到.el-table__fixed-right .el-table__fixed-footer-wrapper ，修改bottom的值，无效。横向滚动条按要求加粗后，遇到的问题：列表的操作列是固定在最右侧的，当滚动条滑动到最右侧的时候，滚动条被遮挡了。如截图所示，普通列body的高度是362px（含横向滚动条12px的高度）固定列body的高度等于普通列body的高度 - 横向滚动条的高度。看红色圈起来的部分，固定列的body高度其实超了，所以挡住了滚动条。
解决elementui el-table前边固定列会遮挡住滚动条 ，左右无法拖动。
崔崔的博客
01-28 5966
当我们使用element table，有时我们需要部分的列固定，我们就给列添加了fxied属性，但是这时候你会发现table的横向滚动条很难拖动，查找原因你会发现原来是固定的列把滚动条给挡住了，只有超出固定的部分滚动条才可以拖动。 解决办法： 1.修改el-table__fixed样式 .el-table { .el-table__fixed { height:auto !important; bottom:17px !important; } }.
el-table fixed 滚动错乱
_____青絲
08-04 343
el-table fixed 滚动错乱。
elementUI el-table设置fixed后，竖向滚动条滚动到底部表格错位的问题（修改源码）
liusixsixsix的博客
09-07 5939
而dolayout事件会重新计算fixed的高度，这时候我们可以看到，在设置fixed高度时候，此时的this.scrollx是改变列宽前的值，而我们需要的是改变列宽后scrollX的值。：el-table在设置了fixed的条件下，滚动竖向滚动条到最底部的时候，会出现表格错位的问题。：fixed部分也是一个表格，在有滚动条的时候没有加上滚动条的高度，所以会导致错位。可以看出来 fixed表格的高度取得是表格的高度减去竖向滚动条的宽度，3.监听元素变化，表格元素变化之后，也需要调用此方法。
前端开发之el-table(vue2中）固定列fixed滚动条被固定列盖住
m0_50207524的博客
04-08 954
在使用fixed固定列的时候会出现滚动条被盖住的情况。
【VUE+ElementUI】el-table表格固定列el-table__fixed导致滚动条无法拖动
sunshineTing2的博客
04-03 1643
当设置了几个固定列之后，点击左侧滚动条却被遮挡
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
11-20
现象： 解决方法 ： 1.修改全局css 2.只修改局部css .你的tableClass{ /deep/ .el-table__fixed { height: 100% !important; //设置高优先，以覆盖内联样式 } } 补充知识：解决ElementUI的Table组件固定列，在屏幕刚好够表格显示时，会出现固定列显示不全的问题 在使用ElementUI的Table组件中的固定列时，发现当表格刚好显示全，处于临界值状态时，固定列的高度(height)会于表格高度不一致，导致固定列显示不全，出现垂直滚动条。 如上图所示，现在表格下方是未出现水平滚动条的，处
el-table fixed固定列导致错位的解决方案
热门推荐
青年码农
07-27 1万+
点击上方“青年码农”关注回复“特效源码”可获取各种资料Element UI table组件可以通过设置fixed属性实现列的固定，但是在某些情况下会导致固定列的样式错乱，下面就总结下解决样式错乱实现方案1.doLayout（官方提供）对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法。2.<el-table>标签上...
el-table 固定表头和固定列之后 由于滚动条导致的 表格线错位
qq_45915537的博客
07-05 2892
table 直接调用tabelRevise函数即可 tableRevise(this.$refs.dirctTable.$el) //修正el-table错位 function tableRevise(table) { const tableWrapper = table.querySelector('.el-table__body-wrapper') const tableBody = table.que...
element-ui table 组件 fixed 布局遮盖滚动条
qq_36437172的博客
10-27 4885
问题描述：在 element-ui 的 table 组件中，给前两列设置了 fixed 属性，让前两列可以固定，同时设置操作列固定在右侧，不随着滚动条滚动移动，结果发现设置后，固定列的滚动条被遮挡了一部分。 效果图如下： 解决方案： .el-table__fixed, .el-table__fixed-right { height: auto !important; // 让固定列的高自适应，且设置!important覆盖ele-ui的默认样式 bottom: 10px !importa
el-table 有滚动时表头表格错位
xzb的博客
11-11 814
el-table 表头表格错位
element问题总结之el-table使用fixed固定列后滚动条滑动到底部或者最右侧的时候错位问题
m0_50207524的博客
04-08 2573
在使用el-table固定行的时候移动滚动条会发现移动到底部或者移动到最右侧的时候会出现表头和内容错位或者是固定列的内容错位的情况。
el-table-column fixed 后滚动条不能使用
05-25
如果使用 el-table-column 的 fixed 属性，滚动条会被 el-table 的外部容器覆盖，导致无法使用。解决方法是给 el-table 组件添加一个样式 `overflow: auto` 来显示滚动条，示例代码如下： ```html <el-table :data="tableData" style="width: 100%; overflow: auto;"> <el-table-column prop="name" label="Name" fixed></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> <el-table-column prop="address" label="Address"></el-table-column> </el-table> ``` 另外，如果你在使用 fixed 属性后还想要表格自适应页面宽度，可以给 el-table 组件添加 `max-height` 和 `min-width` 样式，示例代码如下： ```html <el-table :data="tableData" style="width: 100%; overflow: auto; max-height: 500px; min-width: 600px;"> <el-table-column prop="name" label="Name" fixed></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> <el-table-column prop="address" label="Address"></el-table-column> </el-table> ``` 这样就可以使用 fixed 属性并且正常显示滚动条了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值