vue2 - elementUI报错Error in beforeDestroy hook: “Error: [ElementForm]unpected width详细解决（表单form组件、其他组件

已于 2024-09-12 16:54:31 修改
阅读量3.2k 收藏 3
点赞数 9
分类专栏： 前端常见问题解决 前端组件与功能(开箱即用) 文章标签： elementui vue.js 表单Form组件报错详细解决 表单动态切换或运行加载时报错 很多办法都无法解决一直报错 unpected width vue2 elementUI
于 2024-07-23 15:31:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/140636469
版权
前端组件与功能(开箱即用) 同时被 2 个专栏收录
354 篇文章 2460 订阅 ¥9.90 ¥99.00
订阅专栏
前端常见问题解决
133 篇文章 158 订阅 ¥9.90 ¥99.00
订阅专栏

问题说明

在vue2+element ui组件库中，详细解决报错：[Vue warn]: Error in beforeDestroy hook: "Error: [ElementForm]unpected width " | Error: [ElementForm]unpected width，非常奇怪的错误，可能是运行渲染显示的时候就报错，也可能是动态切换显示表单时报错，大概率发生在el-form(el-form-item)表单组件上，其他组件也有可能发生，并且就算通过class样式也无法解决，很多方法无法解决，本文提供强力方案完美搞定。

其他教程都无法解决，在本文你只要报类似的错误就可以100%完美解决。

在这里插入图片描述

在这里插入图片描述

解决教程

按如下解决方法，

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
专栏目录
订阅专栏
文档_Vue02_事件处理_表单双向绑定_组件_Prop_自定义事件_插槽_动态与异步组件
pre_eminent的JAVA学习园地
05-05 1243
Vue.js_官方文档学习笔记_Part_02事件处理监听事件可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。示例：<div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has...
2021-6月面试总结-vue，uniapp，小程序，h5，更新中
shuux666的博客
03-03 779
**一、**vue 2.6.11 vue****页面的生命周期？ 总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。 创建前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在∗∗created∗∗阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在**created**阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在∗∗cre
ElementUI的不常见报错Error in beforeDestroy hook: “Error: [ElementForm]unpected width
在下魔王ii的博客
11-15 7608
beforeDestroy 钩子中的错误：‘Error: [ElementForm]unpected width‘
Blocked aria-hidden on a ＜div＞ element 解决方案
往事随风
08-20 1万+
Blocked aria-hidden on a element解决方案
ElementPlusError: [ElForm] unexpected width NaN 解决方法
最新发布
lt5227的博客
09-05 1925
在 Vue 和 ElementPlus 项目中，使用 el-form 组件时，设置 label-width="auto" 可能会在隐藏状态下引发控制台错误。这通常发生在组件由于 display: none 被隐藏的情况下，如 el-tab 组件的切换。为解决该问题，可以手动指定 label-width 的宽度，或通过 pnpm patches 对 ElementPlus 源码进行临时修复。pnpm patches 允许开发者修改外部依赖包，并在每次安装时自动应用补丁，确保项目的稳定性。
报错： Error in beforeDestroy hook: “Error: [ElementForm]unpected width “
weixin_51263829的博客
01-11 2109
原因：v-show 并不会删除dom，只是控制了是否显示。报错的分析：获取form的宽度失败，因为auto的时候没有固定的宽度，getComputedStyle().width返回的应该就是auto，组件在添加和删除处理宽度就会把auto强制换为int时变为NaN，所以报错了。自定义表单的双侧拖拽，用了el-tabs，但是el-tabs原理是v-show,解决办法：给el-tabs之中的内容加个v-if即可。beforeDestroy导致关闭页面出错,
[Vue warn]: Error in beforeDestroy hook: “Error: [ElementForm]unpected width “
XIYUXU的博客
02-01 9414
由于代码中使用了v-show以及el-form标签中使用了label-width="auto"，导致离开页面后产生报错 解决方法： 将label-width的auto改为实际宽度。
sublime下载安装使用篇（一）
林太白
03-16 3230
sublime下载安装使用篇（一）
Error in beforeDestroy hook: “Error: [ElementForm]unpected width
fgjfgjf9999的博客
08-26 1657
发现是label-width="auto"同时表单被隐藏的时候会报这个错误。把auto换成实际数值就可以解决。今天遇到vue报这个错误.
vue2的ElementUI的form表单报错“Error: [ElementForm]unpected width”修复
wzp20092009的博客
02-20 2626
ElementUI的form表单，当动态切换显示表单时报错 `Error: [ElementForm]unpected width`。
vue学习
希望我快乐
06-11 835
1. 安装node，直接官网下载安卓即可，会自动安装上npm。 网址：https://nodejs.org 2. 检测node是否安装成功，在终端输入：node -v 以及 npm -v，若有版本信息，则安装成功。 3. 全局安装cli3 npm install -g @vue/cli vue -V(大写) 查看vue版本信息，若有信息则安装成功。 4. cd到工作目录，使用vue ui可视化创建...
Vue文件报错vue.runtime.esm.js?2b0e:619和1888 Error: [ElementForm]unpected width两个错误
weixin_44679078的博客
04-29 1万+
今天在测试之前写的页面的时候，发现在切换页面的时候报了下面这两个错误。 vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in beforeDestroy hook: "Error: [ElementForm]unpected width " 和 vue.runtime.esm.js?2b0e:1888 Error: [ElementForm]unpect...
element-ui常见报错
gugugutime.com
01-14 2042
element-ui常见报错
为element-ui 打个补丁修复el-form的label width问题
Ethan's Blog
06-24 598
打完补丁后都会产生/patches文件，pnpm 打完补丁还会再package.json下产生"pnpm": {
element [ElementForm]unpected width &&unpected width报错解决
qq_39969425的博客
06-20 6255
前端踩坑~ el-form界面有时会报前端错误 （[ElementForm]unpected width &&unpected width）， 之前遇到都没管，因为功能都正常！ 上午客户反馈了一个问题，页面table 10行数据只加载出来3行，前后端及返回值都正常，也不是缓存问题，最后试着解决这个报错之后恢复正常。 问题：form的label-width=“auto”， 原因（二中一即会触发）： ①组件中存在v-show时，并且el-form中labelWidth设为auto时，就会获取不到label的宽度
[ElementForm]unpected width &&unpected width
wo_ai_ni___的博客
01-07 6770
错误代码[ElementForm]unpected width &&unpected width 要么你在el-form-item中有style="display:none"，删除或注释即可， 另一种解决方式是把label-width:auto换成固定值
label-width=‘auto‘使用时遇到的坑
Meowao的博客
01-19 3686
反复测试发现：在表单嵌套时，弹出框中使用label-width=“auto”属性，在离开该页面时会报错：Error in beforeDestroy hook: "Error: [ElementForm]unpected width "；（虽然好像不影响使用 查阅到有前辈提出：使用v-show或者display：none会影响该属性并且出现这个错误；经过检查发现我的页面中并没有使用到v-show以及display：none； 为了解决问题；我暂且将会导致报错的地方都改成了固定的宽度； 在梳
Element form表单 表单域对齐
热门推荐
HH
09-02 2万+
在form表单组件中，我们可以通过 label-position 属性来改变表单域或标签的位置，可选的值有 top/left/right ，默认的是 right ，lable-position 必须要和 label-width（表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值） 共同使用，才会生效。...
js报错信息：Failed to execute ‘removeChild‘ on ‘Node‘: The node to be removed is not a child of this node
weixin_44344709的博客
09-08 3601
做的是商品放大镜的效果，有三个事件，鼠标移入（mouseenter）时创建蒙版（maskDiv），鼠标移动（mousemove）时蒙版跟随鼠标移动，鼠标移出（mouseleave）时移除蒙版。因为刚开始将创建蒙版放在了mouseenter事件里，mouseenter和mouseleave事件中都需要对蒙版进行操作，所以将mouseenter和mouseleave放在了mouseenter中嵌套使用。还是没搞懂报错的原因，试了下用传统的on来注册事件再进行这样的事件嵌套时是不会报错的。
vue注册公共组件报错Error in created hook: "TypeError: Cannot read properties of undefined (reading 'then')"
06-09
在Vue中注册全局组件通常是在`main.js`文件中进行，你可以按照以下步骤检查： 1. 确认你在`main.js`文件中引入了vue依赖库，例如`import Vue from 'vue'`。 2. 确认你在`main.js`文件中正确定义了你的公共组件，例如： ``` import MyComponent from './components/MyComponent.vue' Vue.component('my-component', MyComponent) ``` 3. 确认你在使用公共组件的组件中是否正确引入了Vue依赖库，例如： ``` import Vue from 'vue' export default { name: 'MyOtherComponent', components: { 'my-component': () => import('@/components/MyComponent.vue') } } ``` 如果你已经按照以上步骤进行检查，还是出现了`TypeError: Cannot read properties of undefined (reading 'then')`错误，那么可能是其他地方出现了问题，你可以提供更多的代码或者错误信息，我会尽力帮你解决问题。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值