ElementPlusError: [ElForm] unexpected width NaN 解决方法

我自己在使用 Vue 和 ElementPlus 开发项目时，当切换到某些页面时，控制台会出现如下错误：

经过分析，问题原因如下：

• el-form 组件设置了 label-width=“auto”，并且该组件处于隐藏状态（例如被 display: none 隐藏，项目中是由于 el-tab 组件的切换导致的）。

• 当切换页面时，这个隐藏的表单组件会引发问题。具体来说，el-form 组件在挂载时（即使 display: none，组件依然会挂载），会初始化一个存储 el-label 宽度的数组。而在组件销毁时，该数组会逐一清除宽度信息。

此问题已经在 GitHub 上被记录和讨论，详情请见：GitHub Issue。

解决办法：

最简单的解决办法是手动指定 label-width 的宽度，而不是使用 auto。然而，如果你必须使用 label-width=“auto”，可以使用 pnpm patches 功能对外部源码包进行修改，以解决这个问题。

pnpm patches 功能介绍

pnpm patches 是 pnpm 提供的功能，用于在项目依赖项上应用补丁。它允许你在本地对外部包进行修改，而不需要在代码库中直接更改这些包的源代码。

这个功能特别有用，当你依赖的某个包存在 bug 或者不符合你的需求，而该包的维护者还没有发布修复或更新版本时。