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

已于 2022-01-19 17:24:37 修改
阅读量3.4k 收藏 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
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
element中el-form-item设置label-width=‘auto‘报错
小马甲
12-01 1221
`el-form`中的设置了全局标题宽度是`200px`，此时想要对`el-form-item`取消标题宽度，设置了`label-width='auto'`，结果，报错了~~~
关于label和span设置width无效问题解决方法
12-13
在默认情况下label、span 设置width 是无效的。一般要display属性 复制代码代码如下: display:block; 这样就可以了。但是他会自动加一个换行，如果不想换行的话，可以用 复制代码代码如下: display:inline-block;...
element-ui中Dialog 对话框嵌套form表单使用label-width=“auto“遇到的坑
fangqi20170515的博客
04-06 1396
Dialog 对话框嵌套form表单，弹出框中的表单使用label-width=“auto”属性，在离开页面的时候就会报错（虽然不影响使用，但是控制台报错看着很烦）因为项目中auto需要auto达到自适应效果，所有只能采用第二种方法。但是Dialog 使用的又是v-show来控制的显示与隐藏，这又怎么修改为v-if呢。在网上查阅了很多，主要提供了两个办法。然后又在网上查找解决办法，例如。
Element-ui el-form中label-width=“auto“ 在IE内核浏览器下显示异常问题
qq_33991007的博客
11-25 2827
代码如下: <el-form ref="form" label-width="auto" :model="form" size="small" :rules="rules" > 问题: 在label-width设置为"auto"后,IE内核浏览器及其他浏览器(常用)显示问题如图: 正常(谷歌等浏览器): 异常(IE、QQ、360等): 经过源码分析,auto原理是先通过计算出左侧dom元
element ui表单el-form的label自适应宽度
爬楼梯的前端小白的博客
08-29 1686
【代码】element ui表单el-form的label自适应宽度。
el-tabs嵌套el-form碰到的问题
qq_34179819的博客
08-03 658
当然，对于切换标签，可能会出现校验的红字还在，并没有清空的情况，这是因为使用的Form组件是同一dom，想要清空的校验的话，最简单的方法就是加一个key属性，:key=“key”，tabChange改变了key之后，编译器就会重新渲染Form组件，这样就达到了清空校验的目的！在el-tabs内使用el-form时，会出现标签第一个内的el-form在点击保存按钮后，无法进行全部校验。对于这个问题，目前也没找到原因以及一个好的解决办法，好在通过将tabs内的内容移到外部来，解决了这一问题。
auto-label:基于问题描述的自动标签问题
05-02
或者将文件添加到.github/workflows/issue.yml name : Labeling new issueon : issues : types : ['opened']jobs : build : runs-on : ubuntu-latest steps : - uses : Renato66/auto-label@v2 with : repo-token : ...
label-studio-transformers:使用HuggingFace的转换器标记数据并自动获得预测服务
05-02
label-studio-ml init my-ml-backend --script models/bert_classifier.py cp models/utils.py my-ml-backend/utils.py 使用BERT命名实体识别器创建ML后端 label-studio-ml init my-ml-backend --script models/ner....
Multi-label-classification:多标签分类
03-06
多标签分类的种类对于张量流2/01〜3/01 Dacon Mnist多标签分类3/01〜使用Pos对单词顺序进行分类3070 rtx tensorflow版本和cuda版本CUDA 11.0 库德11.0 tf-nightly == 2.5.0.dev20201212 它对我有用开发设置视窗：
前端学习笔记 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.
echarts中tooltip设置width失效
freeshu的博客
01-03 2014
大分辨率下提示框宽度没问题，小分辨率下宽度异常，之后对tooltip设置宽度失效，失效原因是样式冲突 解决方式加个!important;
element [ElementForm]unpected width &&unpected width报错解决
qq_39969425的博客
06-20 5517
前端踩坑~ el-form界面有时会报前端错误 （[ElementForm]unpected width &&unpected width）， 之前遇到都没管，因为功能都正常！ 上午客户反馈了一个问题，页面table 10行数据只加载出来3行，前后端及返回值都正常，也不是缓存问题，最后试着解决这个报错之后恢复正常。 问题：form的label-width=“auto”， 原因（二中一即会触发）： ①组件中存在v-show时，并且el-form中labelWidth设为auto时，就会获取不到label的宽度
el-form表单组件的标签属性label-width和label-position
m0_57263959的博客
06-15 6542
属性时，可以指定一个具体的宽度值，如像素（px）或百分比（%）。该值决定了标签在水平方向上的宽度，以便在表单布局中进行对齐或控制标签的长度。可以是一个响应式的变量，在 Vue 的 data 中定义，并根据需要进行设置，如。它通常用于与输入框、选择框等表单元素一起使用，以确定标签的显示位置。它通常用于与输入框、选择框等表单元素一起使用，以确定标签的宽度。属性是用于指定表单元素标签宽度的常见属性。通过设置该属性，可以。，并根据具体的布局需求来调整标签的长度。是一个常见的属性，用于。是一个常见的属性，用于。
el-form-item不显示报错$option；label和input不是行内样式显示；el-form表单校验不生效；el-form表单校验正则
killerdoubie的博客
02-27 1120
el-form-item不显示报错$option;label和input不是同行显示；el-form表单校验不生效；el-form表单校验正则
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 1517
ElementUI的form表单，当动态切换显示表单时报错 `Error: [ElementForm]unpected width`。
Vue3警告问题记录二
Komorebi_00的博客
01-10 1583
[ElForm] unexpected width 0 at debugWarn...
关于[ElementForm]unpected width at VueComponent.getLabelWidthIndex的报错
qq_39652695的博客
02-22 3178
在使用element中页面切换的过程中，会出现这个报错。 研究其原因是：造成这个错误的原因是当组件中存在v-show时，并且el-form中labelWidth设为auto时，就会获取不到label的宽度。可以将v-show的地方改为v-if，每次重新渲染组件，或是labelWidth设为固定。 ...
Vue/Vue-Cli/ElementUI报错bug+使用方案合集（持续更新）（24-3-9更新）
coderYYY的博客
05-15 5597
Vue/Vue-cli/ElementUI报错bug问题分析和解决方法，持续更新中
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、付费专栏及课程。

余额充值