ElementUI表格错位修复心得分享
更新时间：2026年03月24日 08:52:41 作者：蓝胖子的多啦A梦
这篇文章主要介绍了ElementUI表格错位修复心得,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
问题如图
点击勾选右侧字段 显示/隐藏，会导致左侧出现表格样式错乱问题
分析
分析问题：列显示/隐藏后，Element UI 表格未重新计算布局，导致样式错乱。
修复 CRUD.operation.vue 中的 updateColumnVisible，在列变更后强制表格重新布局。
解决方法
关键代码
// 强制表格重新计算布局，修复列显示/隐藏后的样式错乱问题
this.$nextTick(() => {
if (table && typeof table.doLayout === 'function') {
table.doLayout();
}
});
使用了doLayout方法之后，基本就可以解决常见的错位问题了，如果情况特殊$nextTick不起作用，用setTimeout试一下即可。
修改后直接更新，让现场人员测试，结果！ 发现了一个很奇葩的问题
奇葩错位
在el-tabs里已经doLayout处理过的table，在右边勾选 字段显示/隐藏，当表格只剩下2-3个字段的时候，又错位了。
现象
库位这一列，数据一行展示的时候，左侧会出现错位现象
库位这一列，数据多行展示的时候，不会出现错位现象
思考
在动态控制字段显示/隐藏的监听事件里再执行一次doLayout不就完了么，现实是，无效果。还是没有解决问题
经过多方面的测试，最终发现罪魁祸首就是
<el-table-column
prop="posName"
:sortable="true"
:label="$t('NeoLight.storageNo')"
width="100" />里边的这个width值！
解决el-table里所有错位问题的方法，其实就是，使用min-width，根据label值的长度调整min-width，min-width过小就会导致各种奇葩的错位，
例如上边这个库位的label，width="100"就会出现错位现象，设为min-width：100就没有问题了。
<el-table-column
prop="posName"
:sortable="true"
:label="$t('NeoLight.storageNo')"
min-width="100" />总结
根据表头文字长度、给有min-width的列设置合适的值，错位问题就解决了。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本篇开始功能模块的开发，首先完成ABP模板自带的身份认证管理模块和租户管理模块。同样的，参考ABP的Angular版本来做。2021-05-05
启动vue ui的时报错spawn cmd ENOENT的问题及解决
这篇文章主要介绍了启动vue ui的时报错spawn cmd ENOENT的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-06-06
最近公司在做一个基于vue开发的项目，项目需要开发一个展示组织架构的树组件，在网上搜了半天，没有找到合适的，下面小编给大家分享一个基于Vue制作组织架构树组件，需要的朋友参考下吧2017-12-12
Vue Router 与 Vue.js 核心深度集成,提供了声明式的路由定义、嵌套路由、动态路由、导航守卫等功能,帮助开发者构建复杂的单页面应用,这篇文章主要介绍了Vue2路由指南：从基础到高级,需要的朋友可以参考下2025-05-05
这篇文章主要介绍了Vue基于iview table展示图片实现点击放大,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-08-08
本篇文章主要介绍了Vue.js移动端左滑删除组件的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要为大家详细介绍了vue实现简单的登录弹出框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
详解vue数组遍历方法forEach和map的原理解析和实际应用
这篇文章主要介绍了详解vue数组遍历方法forEach和map的原理解析和实际应用,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
Vue3新增了Composition API，我们只需将实现某一功能的相关代码全部放进一个函数中，然后return需要对外暴露的对象，这篇文章主要介绍了vue3 Composition API使用,需要的朋友可以参考下2022-12-12
这篇文章主要为大家详细介绍了vue实现简单的购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
最新评论