vue + element el-table表格出现错位

最新推荐文章于 2026-03-25 00:11:39 发布
原创 最新推荐文章于 2026-03-25 00:11:39 发布 · 2k 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文介绍了一种使用Vue和Element UI框架中el-table组件时遇到的表格错位问题及其解决方案。当使用v-if控制表格列的显示与隐藏时，可能会出现最后一列渲染不全或者行错位的情况。通过调用el-table的doLayout()方法可以有效解决这个问题。

vue + element el-table表格出现错位

应用问题场景是用v-if 来控制Table某列 显示和隐藏, el-table中渲染出现最下面一列会渲染不全，以及有时候会出现行错位问题
在这里插入图片描述

通过el-table的doLayout()解决了，
关于doLayout()官方文档如下描述
在这里插入图片描述

在触发加载表时添加

this.$nextTick(() => {
          this.$refs.formGoodsTable.doLayout()
        })

最后完美解决
在这里插入图片描述

Vue3 - Element Plus 表格组件 table 隐藏鼠标移入时 hover 高亮背景色，el-table 组件去除鼠标悬停在表格行的 hover 高亮效果（完美解决表格合并后导致行错位）
🏆 前端领域优质创作者
02-19 8018
vue3，elementplus，el-table，table表格，取消表格行row移入高亮效果，elementplus表格组件去掉鼠标移入行时的hover效果，取消el-table的hover状态，取消高亮显示，隐藏表格鼠标hover效果，去除鼠标触摸变色效果，如何取消elementplus表格的行悬停效果，怎么将表格移入每行时的灰色高亮去掉，table的行hover如何去除，element的el-table合并，处理合并产生的hover样式问题，表格合并后鼠标移入hover出现异常问题，表格行被鼠标
解决vue表格列错位问题
DN金猿的博客
11-19 3952
使用v-if切换tab选项卡的时候，子内容表格的列可能会出现错位问题，官方给出的解决办法是使用doLayout方法,在这里总结了两种方法：1.使用doLayout() <el-table :data="table" ref="table" > oLayout方法进行强制重新渲染 this.$nextTick(() => { this.$refs.table.doLayout() }) 2.给表格的每个列添加一个key值 <el-table-column ...
【VUE】elementUI table表格 列错位/滑动后切换每页显示数后错位/表格使用fixed后错位
SZnAl的博客
08-15 4173
table表格右侧列固定后，在切换页面之后，就会出现列错误的现象。2.添加actived 并调用methods里的方法。此方法为elementUI官方方法，可参考。3.在methods添加方法。1.给表格添加ref。
Element UI表格fixed列错位？5分钟搞定el-table滚动条与固定列对齐问题
最新发布
weixin_29021757的博客
03-25 514
本文详细解析了Element UI中el-table组件fixed列与滚动条错位问题的原因，并提供了多种解决方案。从基础的max-height设置到进阶的自定义滚动条样式调整，帮助开发者快速修复el-table固定列错位问题，确保表格布局的完美对齐。特别适用于需要同时使用固定列和滚动条的自适应高度场景。
VUE表格显示错位的两种解决思路
m0_58874148的博客
03-14 3044
两种思路解决vue表格显示错乱问题
【Vue+ElementUI】el-table动态高度设置及表格内容错乱对不齐
sunshineTing2的博客
04-28 4965
el-table动态高度设置及表格内容错乱对不齐
【解决】Vue elementUI table表格 列错位/滑动后切换每页显示数后错位/表格使用fixed后错位...
SummerGao
12-09 4307
table表格右侧列固定后，在切换页面之后，就会出现列错误的现象 <el-tab...
vue element ui 使用el-table 组件的时候，列使用fixed，表格滚动后出现错位
weixin_42539372的博客
04-17 9325
表格滚动之后fixed列和其他列出现如下错位的情况 在网上找了很多办法，doLayout也不起作用，给column设置：key="index+Math.random()"也不起作用,然后就用监听滚动条的方法写了： this.dom = this.$refs.multipleTable.bodyWrapper console.log(this.dom) this.dom.addEven...
vue element使用el-table时，切换tab，table表格列项发生错位问题
宝拉天天想放假
04-24 724
doLayout需要注意的事项：我这里是通过组件使用的table组件，涉及多层组件封装问题，所以找这个根组件ref找到doLayout方法的时候需要注意写法<el-tab-pane label="统计" name="first"><leftTable<el-tab-pane label="明细" name="second"></el-tabs>// 其中leftTableRef是el-table的ref// 切换 tab请求接口// 其中rightTableRef是el-table的ref。
vue项目解决el-table添加滚动条修改样式表格错位的问题
2301_76641758的博客
03-14 1148
在开发过程中遇到 表格出现错位 比如：下滑或左滑时横线线出现出现错位 滚动条的宽高不相同。通过表格当前.vue文件中 在实例创建之后通过使用element ui 进行重新布局。通过修改修改 element ui.scss文件样式。
vue-table那些走过的坑---持续更新
m0_52765288的博客
03-15 1802
1.解决动态添加表格列顺序错乱 // 等待dom更新将表格进行重新编排 this.$nextTick(() => { this.$refs.table.doLayout() }) 2.动态添加表格列 fixed布局错乱 // 1.el-table身上加上loading属性 <el-table ref="table" v-loading="loading" :ele
vue实现动态控制el-table表格列的展示与隐藏
编写博客，学习交流
09-24 4139
1.引入el-table组件，这里我直接用官网的示例代码 <template> <div class="page"> <el-popover width="60" trigger="click"> <el-checkbox-group v-model="columnSelecteds"> <el-checkbox v-for="item in columnHeaders"
解决elementui 多个el-table切换样式错乱问题，以及doLayout的坑
weixin_43020925的博客
10-19 9379
天坑的饿了么ui，最近有个需求需要在弹窗里做一个表格切换功能，但是多个表格进行切换时，样式会错乱，用v-if也没有，后面按照官方文档提示，通过再el-tabe上绑定个ref，然后使用doLayout这个方法解决，可是最后结果就是一直报错doLayout is not a function，试了无数种方法，在el-dialog的opened回调里调用，写在this.$nextTick回调里，甚至升级到最新版elementui，可是还是没卵用，真的佛了。 最后发现只需要在el-table上绑定一个唯一的key值
vue表格列错位问题
weixin_43369058的博客
03-24 2541
这里写自定义目录标题使用v-if切换tab选项卡的时候，子内容表格的列可能会出现错位问题，官方给出的解决办法是使用doLayout方法 使用v-if切换tab选项卡的时候，子内容表格的列可能会出现错位问题，官方给出的解决办法是使用doLayout方法 1.使用doLayout() oLayout方法进行强制重新渲染 this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …{ this.refs.table.doLa
vue element 表格错位
初壹什伍
07-10 594
vue element 表格发生错位对不齐的问题 在做vue element 表格的时候，页面展示上发现列表对不齐，在网上搜索了很多解决方法，发现一个好用的解决方法： <style scoped> /deep/ .el-table th.gutter{ /* * 解决element-ui 表格篡位的问题 ???? */ display: table-cell!important; } </style> 将这段代码放在入口文件App.vue 中，成功解决了问题，但是原
vue完美解决element-table表格固定列后滚动至底部表格错位问题
IamKangDi的博客
02-15 6774
在此之前改变过滚动条的样式，最好高度一致，兼容webkit内核的浏览器。element-table表格错位，项目介绍 vue2+elementUI+less。
el-table 发生行列错位处理方式
潇雷的博客
11-21 2259
el-table 行列未对齐
ant-design-vue table 表格组件错位解决
热门推荐
东扯葫芦西扯瓜——前端小菜鸟的博客
04-23 1万+
ant-design-vue table 表格组件错位解决原因查找错位消失机制解决思路试验一试验二解决的背后 table组件错位问题。 table组件错位，不管是用element-ui的table组件，还是ant的table组件，只要使用了列的fixed属性，在第一次进入页面时就会出现。 原因查找 经检查dom发现使用fixed后，table组件实际由3个table组成，左边一个，中间一个，右边一个 。如果中间表格有某一列的内容有换行或者特殊内容等， ，这会导致表格实际高度比没有特殊内容要高。三个表格
vue element 表格错位问题
此人很懒，什么也没有留下~
08-21 1047
//在入口文件加入下面样式 body .el-table th.gutter { display: table-cell !important; } body .el-table colgroup.gutter { display: table-cell !important; } 感谢作者：小猴子 原文链接：https://www.cnblogs.com/houBlogs/p/11686384.html ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值