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 或者不符合你的需求，而该包的维护者还没有发布修复或更新版本时。

主要功能和使用场景：

临时修复问题：当一个依赖包有 bug 时，你可以使用 patch 修改这个包的代码，而不需要等待官方修复。
自定义功能：你可以对第三方包添加特定的功能或修改行为，而不影响其他用户的使用。
版本控制友好：补丁保存在项目中，可以通过版本控制系统（如 git）进行管理，确保团队中的其他人也能应用相同的修改。

使用方法：

1. 生成补丁文件：

首先，使用 pnpm patch 命令来生成补丁工作目录。这个命令会把指定的包解压到一个临时目录中，让你可以对其进行修改。

pnpm patch <package-name>

在本例中，命令如下：

命令执行后，控制台会打印出一个临时目录的路径，你可以用 VSCode 等编辑器打开该目录进行源码修改。

修改完后，使用命令 pnpm patch-commit '/private/var/folders/ws/7lv4rzg54030vz_yz3q_gzpm0000gn/T/0bc8411b3aefadfd559ab1f8683226bf' 提交你的修改，这个命令会在你使用 pnpm patch <package-name> 命令的时候在控制台打印

2. 修改包内容：

进入生成的补丁目录后，找到并修改以下两个文件：
es/components/form/src/form-label-wrap.mjs

lib/components/form/src/form-label-wrap.js

3. 创建补丁文件：

修改完成后，使用以下命令提交补丁：

pnpm patch-commit <补丁目录路径>

我的操作如下所示：

补丁提交后，项目的 package.json 文件中会自动增加如下配置：

  "pnpm": {
    "patchedDependencies": {
      "element-plus@2.8.1": "patches/element-plus@2.8.1.patch"
    }
  }

同时，项目中会新增一个 patches 文件夹，记录你的修改。

4. 自动应用补丁：

每次运行 pnpm install 时，pnpm 会自动将生成的补丁应用到相应的依赖包上。

管理和清理补丁：

• 你可以通过手动编辑 patches 目录中的文件来更新或移除补丁。
• 如果不再需要某个补丁，直接删除相应的 .patch 文件即可。

总结

在 Vue 和 ElementPlus 项目中，使用 el-form 组件时，label-width=“auto” 可能会在隐藏状态下引发控制台错误。解决办法可以是手动指定 label-width，或者使用 pnpm patches 来临时修复依赖包中的 bug。

通过 pnpm patches，我们可以快速生成补丁、修改源码并在安装依赖时自动应用补丁，确保项目的稳定性和可维护性。

---

参考博客：

https://blog.csdn.net/qq_39370934/article/details/139909038

https://blog.csdn.net/weixin_45346457/article/details/127388575