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

news2024/11/14 2:52:46

我自己在使用 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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2107423.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

超全分享!这些好用的人力系统不允许还有人不知道!

今天将盘点六款值得推荐的人力系统&#xff0c;为企业选型提供参考&#xff01; 人力系统就如同企业人力资源管理的智慧中枢&#xff0c;能把企业的人才管理得科学高效。 对于企业来说&#xff0c;如果没有一款好用的人力系统&#xff0c;就像航海者失去了罗盘。有了它首先能精…

18:HAL--DMA

一&#xff1a;DMA DMA的基本定义&#xff1a; DMA&#xff0c;全称Direct Memory Access&#xff0c;即直接存储器访问。 DMA传输将数据从一个地址空间复制到另一个地址空间&#xff0c;提供在外设和存储器之间或者存储器和存储器之间的高速数据传输。当CPU初始化这个…

猫咪浮毛引起呼吸问题?希喂、小米、有哈宠物空气净化器性能对比

相信每个铲屎官都会碰到猫咪掉毛的问题&#xff0c;掉落堆积的猫毛除了带来的清扫负担&#xff0c;还存在着极大的健康隐患。毛发主要分为两种&#xff0c;大颗粒的猫毛可以被我们肉眼所看见&#xff0c;通常会沉在地面上、床上。这类猫毛我们可以用粘毛器、吸尘器等工具进行清…

反向沙箱-安全上网解决方案

随着信息化的发展&#xff0c;企业日常办公越来越依赖互联网。终端以及普通PC终端在访问互联网过程中&#xff0c;会遇到各种各样不容忽视的风险&#xff0c;例如员工主动故意的数据泄漏&#xff0c;后台应用程序偷偷向外部发信息&#xff0c;木马间谍软件的外联&#xff0c;以…

录屏时摄像头无法识别?如何录屏时打开摄像头,解决方案及录屏软件推荐

在数字时代&#xff0c;无论是游戏玩家、在线教育者还是企业培训师&#xff0c;录屏软件都已成为日常工作和娱乐中不可或缺的工具。但有时候想录制人物摄像头画面的时候&#xff0c;当录屏软件无法识别到摄像头时&#xff0c;这无疑会给用户带来不小的困扰。本文将提供一系列解…

ts格式转mp4,四款亲测好用软件推荐!

在这个数字视频时代&#xff0c;我们经常会遇到各种视频格式兼容性问题&#xff0c;尤其是从网络下载的高清电影或电视剧集&#xff0c;很多时候都是以TS格式存储。然而&#xff0c;当我们想要在移动设备、社交媒体或视频编辑软件中播放、上传时&#xff0c;MP4格式因其广泛的兼…

SEO之网站结构优化(十五-CMS系统)

初创企业搭建网站的朋友看1号文章&#xff1b;想学习云计算&#xff0c;怎么入门看2号文章谢谢支持&#xff1a; 1、我给不会敲代码又想搭建网站的人建议 2、“新手上云”能够为你开启探索云世界的第一步 博客&#xff1a;阿幸SEO~探索搜索排名之道 15、CMS系统 现在的网站绝…

2024 年高教社杯全国大学生数学建模竞赛题目-C 题 农作物的种植策略

根据乡村的实际情况&#xff0c;充分利用有限的耕地资源&#xff0c;因地制宜&#xff0c;发展有机种植产业&#xff0c;对乡村经济 的可持续发展具有重要的现实意义。选择适宜的农作物&#xff0c;优化种植策略&#xff0c;有利于方便田间管理&#xff0c;提 高生产效益&#…

python-第三方库-[yarl、yaml]

python-第三方库-[yarl、yaml] 一: yarl1> yarl 介绍2> yarl.URL 介绍1. yarl.URL 的语法格式2. yarl.URL demo3. yarl.URL.build()4. yarl.URL().with_*()5. yarl.URL().update_query()6> url / &%组合 二&#xff1a;yaml1> yaml 介绍2> yaml 基本规则1. …

智能客服的四大优势,提升企业服务效率

在这个信息化快速发展的时代&#xff0c;客户服务的重要性越来越凸显。传统的客服方式已经无法满足企业日益增长的服务需求&#xff0c;于是智能客服服务应运而生。智能客服服务不仅改变了企业与客户的互动方式&#xff0c;还提高了服务效率和客户满意度。本文将深入探讨智能客…

La-Z-Boy 标签制作注意事项

在制作标签之前&#xff0c;供应商需要通过EDI向La-Z-Boy发送提前发货通知&#xff08;ASN&#xff09;。ASN中的每个明细行将会至少对应一个运输编号&#xff08;shipment ID&#xff09;&#xff0c;这个信息将会被体现在运输标签上&#xff0c;和标签上的条形码一起&#xf…

log4j漏洞原理以及复现

kali:192.168.222.165 本机&#xff1a;192.168.225.18 原理 Log4j为了输出日志时能输出任意位置的Java对象&#xff0c;引入了Lookup接口&#xff0c;这个Lookup接口可以看作是JNDI的一种实现&#xff0c;允许按照具体的名称逻辑查找对象的位置&#xff0c;并输出对象的内容…

使用nssm将fastapi做成服务解决cmd使用命令启动卡顿问题

下载nssm 点击下载 我使用的是64位的操作系统所以选择64位win64 点击进去在地址栏里面输入cmd回车 输入 nssm.exe install "想要做成的服务名称" "python路径精确到python.exe" "程序路径要绝对路径"然后就做出了服务并且启动 可以在服务管…

YOLOv9改进策略【注意力机制篇】| 引入Shuffle Attention注意力模块,增强特征图的语义表示

一、本文介绍 本文记录的是基于Shuffle Attention注意力模块的YOLOv9目标检测改进方法研究。Shuffle Attention模块通过独特的设计原理&#xff0c;在保持轻量级的同时实现了高效的特征注意力机制&#xff0c;增强了网络的表示能力。本文对YOLOv9的RepNCSPELAN4模块进行二次创…

Elasticsearch 中的相关性和得分

在Elasticsearch中&#xff0c;相关性&#xff08;Relevance&#xff09;和得分&#xff08;Score&#xff09;是搜索引擎技术中非常重要的概念&#xff0c;它们直接影响搜索结果的排序。 相关性&#xff08;Relevance&#xff09; 相关性是指搜索结果与用户查询的相关程度。…

Java System.getenv 和 System.getProperty 区别

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storm…

全新界面,原生Mac和Linux支持的WinBox 4 发布了!

简介 WinBox 4 终于来了&#xff01;&#xff01;​ ​ 适用于 Windows、macOS 和 Linux的原生程序。&#xff08;不需要开wine之类的软件了&#xff09; 更现代化的软件界面&#xff0c;终于不是上个世纪的风格了。 支持深色模式&#xff0c;不能亮瞎狗眼了。 官方&#…

echarts多个环形图

echarts图表集 var dataValue [{name:今日待分配方量,value:49}, {name:今日已分配方量,value:602}, {name:今日完成方量,value:1037}]var piedata1 [{name: 1#拌和机,value: 20},{name: 2#拌和机,value: 22},{name: 3#拌和机 ,value: 17},{name: 4#拌和机,value: 18},{name…

品牌做渠道开发有何意义,重要性在哪里?

品牌做渠道开发&#xff0c;就是为了把企业的产品和服务&#xff0c;传递给目标消费者&#xff0c;从而建立并维护了一系列的分销渠道。 渠道开发不仅涉及了销售渠道&#xff08;电商平台、线下实体店、分销商、代理商&#xff09;等&#xff0c;还包括制定渠道策略&#xff0…

【区块链 + 人才服务】基于 FISCO BCOS 联盟链的电子证书认证平台 | FISCO BCOS应用案例

传统电子证书认证存在一些弊端&#xff0c;比如由于数据权限过于集中&#xff0c;可能存在私自篡改数据的问题&#xff0c;从而导致数据不可信。其次&#xff0c;因为数据存储于中心服务器&#xff0c;存在单点故障或易被不法分子恶意攻击的风险&#xff0c;造成数据完整性的问…