使用el-table中fixed固定列错位问题

于 2025-06-13 11:01:38 发布
阅读量536 收藏
点赞数 2
CC 4.0 BY-SA版权
文章标签： vue.js elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44526436/article/details/148627942

问题呈现：
el-table中前三列是固定位，循环加载表格(一个页面中多个el-table)

加载数据的时候前几个展示还算正常，后面几个会出现错行现象。

解决方案：
1.使用doLayout，不生效
看了下表格内部数据，有v-if，把v-if变成v-show ,也不行。
后面一个个注释v-show的代码，最后定位到el-input使用了属性:autosize
把这个去掉就好了

最终解决方案：
去掉el-input中的:autosize,给定了一行数，没有使用doLayout

Kate-wang
关注
el-table fixed固定列导致错位的解决方案
青年码农
07-27 2万+
点击上方“青年码农”关注回复“特效源码”可获取各种资料Element UI table组件可以通过设置fixed属性实现列的固定，但是在某些情况下会导致固定列的样式错乱，下面就总结下解决样式错乱实现方案1.doLayout（官方提供）对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法。2.<el-table>标签上...
Vue中el-table追加行后固定列滚动错位问题
qq_39753413的博客
07-12 3467
Vue中el-table追加行后固定列滚动错位问题 偶然发现一个问题，但是并没有找到解决方案，自己调试了两个多小时终于解决。先贴出问题业务描述：在已查询完全部的符合条件的数据后，表格最下方提示“没有更多数据” 使用solt = “append” 追加div 这时候滑动到最底部，固定列错位了。......
bootstrap-table-fixed-columns冻结列，并完善排序、列宽和合并行
03-05
在原bootstrap-table-fixed-columns的基础上，解决了冻结列后，排序失效、列宽错位和合并行失效问题
el-table 设置fixed导致行错乱问题
developinggirl的博客
03-08 2272
el-table布局问题
el-table fixed列错位
最新发布
weixin_39419463的博客
05-20 235
当使用 Element UI 的 el-table 组件并设置 fixed 列时，可能会出现列错位的问题。
el-table fixed固定列导致错位的解决方法介绍
风中追风
07-17 4531
Element UI table组件可以通过设置fixed=right属性实现列的固定，但是在某些情况下会导致固定列的样式错乱,只要刷新页面即出现表格错位问题,下面就总结下解决样式错乱实现方案。就可以解决错位问题了，到此这篇关于el-table fixed固定列导致错位的解决方法的文章就介绍到这了。对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法。
el-table里面固定列表头，表头错位
weixin_43588661的博客
11-25 418
然而使用官网自带的doLayout()无论是watch里面监听表格数据，还是在actived里面加载就监听，都不能解决这个问题。或者查到的的加:key方法都无法解决这个问题，最终是通过调整el-table__fixed的div的css属性解决错位的问题。使用fixed固定列的时候会生成一个类名为el-table__fixed的div，而这个里面的div就是产生表头错位的原因。表头使用下图述所示数据时，使用fixed固定首列，结果表头直接出现错乱，概率出现。
el-table fixed导致列表错位
tutouxiaoyaonie的博客
07-29 2374
vue使用el-table表格，设置fixed固定列后错位问题
el-table 固定列错位的问题
九日的博客
10-14 8002
每个人造成错位的原因可能不同，但是背后的原因都是投影列与固定列的样式不同导致了实际渲染出来的效果和预想效果出现了偏差，而解决方法都一样，即统一投影列与固定列的样式。
el-table表固定列错位
weixin_46155697的博客
07-01 1363
判断当前路由页面的name与表格所在页面name相同，且表格ref = “refsTable”时，对 Table 进行重新布局。2.页面配置table的ref=“refsTable”,并引用混入文件。3.特殊页面，直接在监听页面被激活函数调用。1.在混入文件中监听页面激活函数。
el-table 固定fixed后 滑动错位
03-09
对于 `el-table` 中固定列在滚动时出现错位的问题，通常是因为浏览器渲染机制以及 CSS 属性处理不当所引起。为了有效解决这一问题，可以采取以下几种方法： #### 方法一：调整样式属性 通过修改表格容器及其子元素...
el-table 固定表头和固定列之后 由于滚动条导致的 表格线错位
qq_45915537的博客
07-05 3551
table 直接调用tabelRevise函数即可 tableRevise(this.$refs.dirctTable.$el) //修正el-table错位 function tableRevise(table) { const tableWrapper = table.querySelector('.el-table__body-wrapper') const tableBody = table.que...
el-table fixed固定列纵向滚动条和表格错位
02-06
对于 `el-table` 组件中的固定列和纵向滚动条组合使用时可能出现的表头错位现象，可以通过调整 CSS 和 JavaScript 来解决问题。 #### 方法一：CSS 方案 通过修改 `.el-table--scrollable-y .el-table__body-wrapper...
el-table使用fixed固定一列后表格错位
qq_43765727的博客
06-02 4003
el-table使用fixed固定一列后表格错位
解决el-table使用fixed后错位问题
weixin_42119356的博客
01-24 2336
解决el-table使用fixed后错位问题
el-table 设置固定列导致行错位的解决方案
sinat_33255495的博客
04-10 1210
element 官方给出的解决办法是使用doLayout，使用doLayout重新加载一下table就好了。
element el-table 设置fixed导致行错乱问题
见贤思齐焉，见不贤内自省
09-12 4921
element el-table 设置fixed导致行错乱问题
el-table使用fixed错位问题
qq_40364610的博客
11-10 2706
解决方案： /*解决表格fixed错位问题*/ .el-table{ overflow: auto; } .el-table__header-wrapper,.el-table__body-wrapper,.el-table__footer-wrapper{overflow:visible;} .el-table__body-wrapper{ overflow-x:visible !important; } /* 这个是为了解决前面样式覆盖之后伪类带出来的竖线 */
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值