label-width=‘auto‘使用时遇到的坑

已于 2022-01-19 17:24:37 修改
阅读量3.6k 收藏 2
点赞数 1
文章标签： html javascript 前端
于 2022-01-19 16:32:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Meowao/article/details/122584156
版权

反复测试发现：在表单嵌套时，弹出框中使用label-width=“auto”属性，在离开该页面时会报错：Error in beforeDestroy hook: "Error: [ElementForm]unpected width "；（虽然好像不影响使用

img

查阅到有前辈提出：使用v-show或者display：none会影响该属性并且出现这个错误；经过检查发现我的页面中并没有使用到v-show以及display：none；

为了解决问题；我暂且将会导致报错的地方都改成了固定的宽度；

在梳理问题时，怀疑是因为在对话框的表单中使用这个属性所以造成了这种情况。但由于才疏学浅，无从验证。欢迎了解该问题的前辈前来指点！

-------------------------------------------------------------------------------------------------------------------------

文章链接：Element的dialog使用的是v-show来控制显示与隐藏_我爱美女的博客-CSDN博客

看到这篇帖子，意识到我的页面中报错是在对话框el-dialog中的表单触发时才会出现的，所以了解了一下dialog显示隐藏的机制。这就不难理解了。

在前辈们的帖子中提到了两种解决方法：1.把label-width的值改为固定；2.把v-show改为v-if。

因为我的项目中需要auto的自适应效果，所以只能采用方法2 。那么问题又来了，要去修改dialog的源码嘛....

Meowao
关注
vue2 - elementUI报错Error in beforeDestroy hook: “Error: [ElementForm]unpected width详细解决（表单form组件、其他组件
高级前端工程师
07-23 3129
vue2，elementui，报错，Form表单，el-form，element中el-form-item设置label-width=‘auto‘报错，如何解决这个问题，设置固定宽度了还是报错，auto，出错，vue报错Error in beforeDestroy hook: "Error: [ElementForm]unpected width " | Error: [ElementForm]unpected width，未插入宽度，未嵌入宽度，vue2的ElementUI的form表单报错，只能用固定值
【Element-UI】框架的使用总结
weixin_48596030的博客
10-25 599
Element是一套基于vue.js的组件库。 将使用过程中遇到的问题，记录总结下来。
element中el-form-item设置label-width=‘auto‘报错
小马甲
12-01 1718
`el-form`中的设置了全局标题宽度是`200px`，此时想要对`el-form-item`取消标题宽度，设置了`label-width='auto'`，结果，报错了~~~
Element-ui el-form中label-width=“auto“ 在IE内核浏览器下显示异常问题
qq_33991007的博客
11-25 2977
代码如下: <el-form ref="form" label-width="auto" :model="form" size="small" :rules="rules" > 问题: 在label-width设置为"auto"后,IE内核浏览器及其他浏览器(常用)显示问题如图: 正常(谷歌等浏览器): 异常(IE、QQ、360等): 经过源码分析,auto原理是先通过计算出左侧dom元
element-ui中Dialog 对话框嵌套form表单使用label-width=“auto“遇到的坑
fangqi20170515的博客
04-06 1549
Dialog 对话框嵌套form表单，弹出框中的表单使用label-width=“auto”属性，在离开页面的时候就会报错（虽然不影响使用，但是控制台报错看着很烦）因为项目中auto需要auto达到自适应效果，所有只能采用第二种方法。但是Dialog 使用的又是v-show来控制的显示与隐藏，这又怎么修改为v-if呢。在网上查阅了很多，主要提供了两个办法。然后又在网上查找解决办法，例如。
获取el-form设置label-width：auto时计算的宽度值
澪月
09-08 347
【代码】获取el-form设置label-width：auto时计算的宽度值。
前端学习笔记 vue之label-width
水镜先生的博客
12-02 1万+
这个主要是为了在input表单前加一个label预留指定宽度的空间， 代码如下 <el-form ref="login-form" :model="form" label-width="80px" class="login-form"> <h2 class="login-title">证件照管理系统</h2> <el-form-item label="用户名：" prop="username"> <el-inpu.
el-form表单组件的标签属性label-width和label-position
m0_57263959的博客
06-15 7701
属性时，可以指定一个具体的宽度值，如像素（px）或百分比（%）。该值决定了标签在水平方向上的宽度，以便在表单布局中进行对齐或控制标签的长度。可以是一个响应式的变量，在 Vue 的 data 中定义，并根据需要进行设置，如。它通常用于与输入框、选择框等表单元素一起使用，以确定标签的显示位置。它通常用于与输入框、选择框等表单元素一起使用，以确定标签的宽度。属性是用于指定表单元素标签宽度的常见属性。通过设置该属性，可以。，并根据具体的布局需求来调整标签的长度。是一个常见的属性，用于。是一个常见的属性，用于。
Vue（五）- element ui库安装和使用过程中遇到的坑
sunny_jiangsu的博客
11-19 2739
1. 安装和引入 npm i element-ui –S //vue_demo\src\main.js中引入文件 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); 2. UI组件使用遇到的坑点 Layout布局 <el-col :...
浅谈对象数据赋值问题---我遇到的一个坑
qq_40372395的博客
05-07 753
今天在做一个大型网站表格导入的时候，我踩了一个坑，让宝宝我好忧伤，感觉智商的倒退 看到这个数据重复的问题，还以为我没错，结果狠狠打脸啊，伤心的不要不要的 话不多说，上代码，看看我的问题，以后要少犯类似的问题 <html> <head> <meta charset="utf-8"> <title>活动管理</title&gt...
Vue 2.x折腾记 - (16) 基于Ant Design Vue 封装一个配置式的表单搜索组件
CRPER
04-10 7148
前言 这次的后台管理系统项目选型用了Vue来作为主技术栈； 因为前端时间用过React来写过项目(用了antd)，感觉很棒棒。 这次就排除了Element UI,而采用了Ant Design Vue; 分析整个项目原型后，发现又可以抽离类似之前的React表格搜索组件 React 折腾记 - (6) 基于React 16.x+ Antd 3.封装的一个声明式的查询组件(实用强大) 效果图 响...
element [ElementForm]unpected width &&unpected width报错解决
qq_39969425的博客
06-20 6235
前端踩坑~ el-form界面有时会报前端错误 （[ElementForm]unpected width &&unpected width）， 之前遇到都没管，因为功能都正常！ 上午客户反馈了一个问题，页面table 10行数据只加载出来3行，前后端及返回值都正常，也不是缓存问题，最后试着解决这个报错之后恢复正常。 问题：form的label-width=“auto”， 原因（二中一即会触发）： ①组件中存在v-show时，并且el-form中labelWidth设为auto时，就会获取不到label的宽度
element ui表单el-form的label自适应宽度
爬楼梯的前端小白的博客
08-29 1811
【代码】element ui表单el-form的label自适应宽度。
el-tabs嵌套el-form碰到的问题
qq_34179819的博客
08-03 831
当然，对于切换标签，可能会出现校验的红字还在，并没有清空的情况，这是因为使用的Form组件是同一dom，想要清空的校验的话，最简单的方法就是加一个key属性，:key=“key”，tabChange改变了key之后，编译器就会重新渲染Form组件，这样就达到了清空校验的目的！在el-tabs内使用el-form时，会出现标签第一个内的el-form在点击保存按钮后，无法进行全部校验。对于这个问题，目前也没找到原因以及一个好的解决办法，好在通过将tabs内的内容移到外部来，解决了这一问题。
sublime下载安装使用篇（一）
林太白
03-16 3226
sublime下载安装使用篇（一）
element ui表单el-form的label自适应宽度并左对齐
热门推荐
weixin_43711639的博客
10-20 1万+
el-form标签中label-width设置为auto，label就会自适应标签的长度，但会默认右对齐(此时使用label-position="left"也无法改变对其方式) 代码如下： 效果图： 此时，label以右对齐的方式进行自适应，经过调查发现，element中是通过 .el-form-item__label-wrap{ float: left; } 将label向左票之后，通过填补margin-left实现右对齐，所以想让label自适应之后左对齐，只...
vue2的ElementUI的form表单报错“Error: [ElementForm]unpected width”修复
最新发布
wzp20092009的博客
02-20 2578
ElementUI的form表单，当动态切换显示表单时报错 `Error: [ElementForm]unpected width`。
computed和watch的区别
qq_43653325的博客
02-01 422
···js 一watch擅长处理的场景：一个数据影响多个数据 不支持缓存，数据变，直接会触发相应的操作； 2.watch支持异步； 3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值； 当一个属性发生变化时，需要执行对应的操作；一对多； 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数， 　　immediat...
el-form-item 使用label-width="auto"后 input 和 label不在同一行
05-18
如果el-form-item使用了label-width="auto"属性，label的宽度会自适应内容的宽度，这可能会导致label和input不在同一行。可以尝试以下解决方法： 1. 使用固定宽度的label：可以设置label-width为一个固定的像素值，这样label就会有一个固定的宽度，不会因为内容而自适应宽度。 ``` <el-form-item label="用户名" label-width="80px"> <el-input v-model="username"></el-input> </el-form-item> ``` 2. 使用flex布局：将el-form-item设置为display:flex，可以让label和input在同一行，并且根据内容自适应宽度。 ``` <el-form-item label="用户名" label-width="auto" style="display:flex;"> <el-input v-model="username"></el-input> </el-form-item> ```
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值