el-dialog搭配el-form使用遇到的问题[bug记录]

项目场景：

国际化项目, 需要中英文切换, 弹窗里面嵌套了form表单, 其中label中文和英文宽度不一样(英文比中文宽), 就会导致中文正常的情况下, 英文换行. 如下图所示:
------这是中文的:

------这是英文的:

其实这个问题很好解决, 但是跟UI沟通的是弹窗的宽度不能变, 输入框的宽度也不能变, 英文换行就换行😨, 都全部做完了, 但是客户觉得英文换行影响阅读, 最终确定的结果是弹窗宽度可以变, 英文一行展示☹
这样的话el-form的label-width就不能给固定的值了, 参照官网可以给auto, 也就是说label的宽度自适应, 可以让文字一行展示, 但是解决好了在切换中英文的时候报错了:

是element内部抛的一个错误, 就是获取label宽度时候获取失败了

---

原因分析：

分析了一下, 插件内部关于label值给auto的实现过程, 错误是在切换中英文的时候报的, 而且不打开这个弹窗就正常, 打开过一次之后切换中英文就报错, 所以猜测, 内部实现过程是获取label的最大宽度, 然后赋值给所有的label, 结果发现不是赋值所有的label, 而是通过最大宽度来动态的给每个label和form-item设置margin-left值, 如图:
label:

form-item:

---

解决方案：

所以, 打开过一次弹窗之后, 加载了el-form但是切换中英文的时候没打开弹窗, 所以获取不到label的宽度, 就报错了, 所以只需要把el-dialog加上v-if就好了, 这样关闭弹窗的话el-form也没有了, 就不会报错了.
欢迎大家一起讨论学习😊~