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的列设置合适的值，错位问题就解决了。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。