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的列设置合适的值，错位问题就解决了。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue+Element中table表格实现可编辑(select下拉框)
这篇文章主要介绍了vue+Element中table表格实现可编辑，实现select下拉框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
这篇文章主要介绍了vue cli3 实现分环境打包的步骤，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-03-03
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。通过本文给大家分享vuex 渐进式教程实例代码，从入门级带你慢慢深入使用vuex，感兴趣的朋友一起看看吧2018-11-11
这篇文章主要为大家详细介绍了vue.js中使用mint-ui框架的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
Vue Cli3 打包配置并自动忽略console.log语句的方法
这篇文章主要介绍了Vue Cli3 打包配置并自动忽略console.log语句的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
这篇文章主要介绍了vue中的row布局靠右对齐,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
给大家带来一篇关于用nodejs实现excel文件的读取并去重的功能，有兴趣的朋友参考学习下。2018-04-04
这篇文章主要介绍了vite项目如何集成eslint和prettier问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
vue-quill-editor+plupload富文本编辑器实例详解
这篇文章主要介绍了vue-quill-editor+plupload富文本编辑器实例详解,需要的朋友可以参考下2018-10-10
element-ui form表单的动态rules校验功能实现
在vue项目中，有时候可能会用到element-ui form表单的动态rules校验，这篇文章主要介绍了element-ui form表单的动态rules校验,我们可以巧妙的运用element-ui form表单里面form-item的校验规则来处理，本文结合实例代码介绍的非常详细，需要的朋友可以参考下2023-07-07
最新评论