获取el-form设置label-width：auto时计算的宽度值

最新推荐文章于 2025-03-05 10:28:47 发布
原创 最新推荐文章于 2025-03-05 10:28:47 发布 · 476 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript #elementui

本文介绍了在Vue.js应用中，数据加载完成后如何使用$nextTick钩子确保DOM更新完成后再操作ref对象的autoLabelWidth属性，实现组件间交互的正确时机控制。 
数据加载完毕后调用
this.$nextTick(_=>{
    this.$refs.ruleForm.autoLabelWidth 
})

澪月
关注
Element-ui el-form中label-width=“auto“ 在IE内核浏览器下显示异常问题
qq_33991007的博客
11-25 3180
代码如下: <el-form ref="form" label-width="auto" :model="form" size="small" :rules="rules" > 问题: 在label-width设置为"auto"后,IE内核浏览器及其他浏览器(常用)显示问题如图: 正常(谷歌等浏览器): 异常(IE、QQ、360等): 经过源码分析,auto原理是先通过计算出左侧dom元
【实习小tip】el-form设置label文字宽度、设置el-label和el-input等高、服务器端（接口）方式URL Scheme获取
fangyuan__的博客
08-18 5505
el-form设置label文字宽度、设置el-label和el-input等高、服务器端（接口）方式URL Scheme获取
B站(云e办)SpringBoot实战练习的Sql文件、前端Vue源码、后端springboot源码
m0_54849806的博客
02-26 1303
B站SpringBoot实战练习的资源 1. Sql下载地址： 2. 前端源码下载地址： 3. 后端源码下载地址 资源来源——网络资源搜索！github开源项目练习！ 1. Sql下载地址： 链接：点击我下载sql文件 提取码：yeb7 2. 前端源码下载地址： 链接：点我下载前端代码 提取码：yeb7 3. 后端源码下载地址 链接：点我下载前端代码 提取码：yeb7 如需在线api文档请联系 qq： 87395809, 表明来意 总结 写到这里也结束了，在文章最后放上一个小小的福利，以下为小编自
element中el-form-item设置label-width=‘auto‘报错
小马甲
12-01 2278
`el-form`中的设置了全局标题宽度是`200px`，此时想要对`el-form-item`取消标题宽度，设置了`label-width='auto'`，结果，报错了~~~
element ui表单el-form的label自适应宽度
爬楼梯的前端小白的博客
08-29 2074
【代码】element ui表单el-form的label自适应宽度。
<el-form :model="projectInfo" label-width="120px" class="project-form"> <el-row :gutter="20"> <el-col :span="8"> <el-form-item label="项目名称："> <el-input v-model="projectInfo.name" /> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="项目编码："> <el-input v-model="projectInfo.code" /> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="采集目的："> <el-input v-model="projectInfo.purpose" /> </el-form-item> </el-col> </el-row> <el-row :gutter="20"> <el-col :span="8"> <el-form-item label="参与者姓名："> <el-input v-model="projectInfo.participantName" /> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="参与者手机："> <el-input v-model="projectInfo.participantPhone" /> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="设备名称："> <el-input v-model="projectInfo.deviceName" /> </el-form-item> </el-col> </el-row> <el-row :gutter="20"> <el-col :span="8"> <el-form-item label="设备类型："> <el-input v-model="projectInfo.deviceType" /> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="采集文件号："> <el-input v-model="projectInfo.collectionFileNumber" /> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="设备类别："> <el-input v-model="projectInfo.deviceCategory" /> </el-form-item> </el-col> </el-row> <el-row :gutter="20"> <el-col :span="8"> <el-form-item label="开始时间："> <el-input v-model="projectInfo.startTime" /> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="业务与场景："> <el-input v-model="projectInfo.businessScene" /> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="采集地域："> <el-input v-model="projectInfo.collectionRegion" /> </el-form-item> </el-col> </el-row> <el-row :gutter="20"> <el-col :span="8"> <el-form-item label="数据文件名："> <el-input v-model="projectInfo.dataFileName" /> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="上传来源："> <el-input v-model="projectInfo.uploadSource" /> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="QT报告："> <el-input v-model="projectInfo.qtReport" /> </el-form-item> </el-col> </el-row> </el-form> 不用这种col row的写法
最新发布
09-18
<el-form :model="projectInfo" label-width="120px" class="project-form flex-form"> <!-- 第一行 --> <div class="form-row"> <el-form-item label="项目名称："> <el-input v-model="projectInfo.name" /> ...
<!-- 第二行 --> <el-row> <el-col :span="24" style="text-align: center;"> <el-form-item label="开始卡号:" class="custom-form-item" style="display: flex; align-items: center; justify-content: center; gap: 8px;"> <el-input style="width: 180px; margin: 0;" class="custom-input" ></el-input> </el-form-item> </el-col> </el-row> <!-- 第三行 --> <el-row> <el-col :span="24" style="text-align: center;"> <el-form-item label="截止卡号:" class="custom-form-item" style="display: flex; align-items: center; justify-content: center; gap: 8px;"> <el-input style="width: 180px; margin: 0;" class="custom-input" ></el-input> </el-form-item> </el-col> </el-row> <!-- 第四行 --> <el-row> <el-col :span="24" style="text-align: center;"> <el-form-item label="前缀:" class="custom-form-item" style="display: flex; align-items: center; justify-content: center; gap: 8px;"> <el-input style="width: 180px; margin: 0;" class="custom-input" ></el-input> </el-form-item> </el-col> </el-row>使文字和文本对齐
08-20
1. 统一设置所有el-form-item__label的宽度，确保每个标签占据相同的宽度，这样输入框会在同一垂直线上。 2. 使用Element UI的label-position属性来调整标签的位置，比如设置为right，让标签右对齐，输入框左对齐，...
<style lang="scss" scoped> .el-date-editor.el-input { width: auto; } .add-update-preview .el-form-item /deep/ .el-form-item__label { padding: 0 10px 0 0; color: #999; font-weight: 600; width: 180px; font-size: 16px; line-height: 40px; text-align: right; } .add-update-preview .el-form-item /deep/ .el-form-item__content { margin-left: 180px; } .add-update-preview .el-input /deep/ .el-input__inner { border: 1px solid #e8e8e8; border-radius: 0px; padding: 0 12px; color: #000; width: 100%; font-size: 16px; height: 40px; } .add-update-preview .el-select /deep/ .el-input__inner { border: 1px solid #e8e8e8; border-radius: 0px; padding: 0 12px; color: #000; width: 100%; font-size: 16px; min-width: 50%; height: 40px; } .add-update-preview .el-date-editor /deep/ .el-input__inner { border: 1px solid #e8e8e8; border-radius: 0px; padding: 0 10px 0 30px; color: #000; background: #fff; width: 100%; font-size: 16px; height: 40px; } .add-update-preview /deep/ .el-upload--picture-card { background: transparent; border: 0; border-radius: 0; width: auto; height: auto; line-height: initial; vertical-align: middle; } .add-update-preview /deep/ .el-upload-list .el-upload-list__item { border: 1px solid #e8e8e8; cursor: pointer; border-radius: 0px; color: #666; background: #fff; width: 150px; font-size: 34px; line-height: 150px; text-align: center; height: 150px; } .add-update-preview /deep/ .el-upload .el-icon-plus { border: 1px solid #e8e8e8; cursor: pointer; border-radius: 0px; color: #666; background: #fff; width: 150px; font-size: 34px; line-height: 150px; text-align: center; height: 150px; } .add-update-preview .el-textarea /deep/ .el-textarea__inner { border: 1px solid #e8e8e8; border-radius: 0px; padding: 12px; color: #666; background: #fff; width: 100%; font-size: 14px; min-width: 400px; height: 120px; } .add-update-preview .btn3 { border: 0px solid #ccc; cursor: pointer; border-radius: 4px; padding: 0 10px; margin: 0 10px 0 0; color: #fff; background: #50adfd; width: auto; font-size: 16px; min-width: 110px; height: 40px; } .add-update-preview .btn3:hover { opacity: 0.8; } </style>
09-12
::v-deep .el-form-item .el-form-item__label { padding: 0 10px 0 0; color: #999; font-weight: 600; width: 180px; font-size: 16px; line-height: 40px; text-align: right; } ::v-deep .el-form-...
element-ui中Dialog 对话框嵌套form表单使用label-width=“auto“遇到的坑
fangqi20170515的博客
04-06 1828
Dialog 对话框嵌套form表单，弹出框中的表单使用label-width=“auto”属性，在离开页面的时候就会报错（虽然不影响使用，但是控制台报错看着很烦）因为项目中auto需要auto达到自适应效果，所有只能采用第二种方法。但是Dialog 使用的又是v-show来控制的显示与隐藏，这又怎么修改为v-if呢。在网上查阅了很多，主要提供了两个办法。然后又在网上查找解决办法，例如。
label-width=‘auto‘使用时遇到的坑
Meowao的博客
01-19 4075
反复测试发现：在表单嵌套时，弹出框中使用label-width=“auto”属性，在离开该页面时会报错：Error in beforeDestroy hook: "Error: [ElementForm]unpected width "；（虽然好像不影响使用 查阅到有前辈提出：使用v-show或者display：none会影响该属性并且出现这个错误；经过检查发现我的页面中并没有使用到v-show以及display：none； 为了解决问题；我暂且将会导致报错的地方都改成了固定的宽度； 在梳
el-form表单组件的标签属性label-width和label-position
m0_57263959的博客
06-15 9020
属性时，可以指定一个具体的宽度值，如像素（px）或百分比（%）。该值决定了标签在水平方向上的宽度，以便在表单布局中进行对齐或控制标签的长度。可以是一个响应式的变量，在 Vue 的 data 中定义，并根据需要进行设置，如。它通常用于与输入框、选择框等表单元素一起使用，以确定标签的显示位置。它通常用于与输入框、选择框等表单元素一起使用，以确定标签的宽度。属性是用于指定表单元素标签宽度的常见属性。通过设置该属性，可以。，并根据具体的布局需求来调整标签的长度。是一个常见的属性，用于。是一个常见的属性，用于。
在el-form-item 重置label宽度
qq_26642611的博客
12-05 3万+
*//在el-form 重置label宽度* <el-form :model="ruleFormOne" :rules="rules" ref="ruleFormOne" label-width="120px"> <el-form-item label="活动标题：" prop="name"> <el-inp...
使用el-form时，让label的宽度是最大的label宽度
m0_52872381的博客
01-23 365
便可使得label宽度是最大的label宽度。
element-ui 表单el-form组件的宽度设置
2303_76675983的博客
03-05 1936
1.给整个el-form设置 所有的el-form-item都是一样的宽度。2.单独给需要的el-form-item设置。
el-form -输入框和下拉框宽度100%-深度选择器
weixin_57246351的博客
04-24 1981
<template> <div class="demoBox"> <!-- <el-form ref="form" :model="form" label-width="154px"> --> <!-- label-width="154px" 控制输入框左侧的文字宽度 --> <el-form ref="form" :model="form" label-width="154px"> &l.
el-form中el-input输入框的宽度问题
weixin_47169270的博客
09-13 2万+
问题：要解决lable和input水平排列且input宽度可以自定义 1、el-form有个属性inline默认为false，故而input输入框占了整行 <el-form :model="addDialogForm" :rules="addDialogRules" > <el-form-item prop="attr_name" :label="addTitle"> <el-input v-model="addDialogForm.attr_name"
element ui中表单el-form的label怎么设置宽度
热门推荐
qq_38916157的博客
11-14 4万+
测试要求把输入框前面的名字带括号的把括号部分显示在下一行，可以通过设置前面的label宽度来进行换行。 在具体的el-form-item中设置label-width， 也可以为整个表单el-form设置label-width，这样整个页面的label宽度统一。 ...
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自适应之后左对齐，只...
el- form 设置label 设置最小宽度
12-05
在Element UI中，`el-form`组件并没有直接提供设置label最小宽度的属性。不过，我们可以通过自定义样式来实现这一需求。以下是几种常见的方法： ### 方法一：使用CSS类 1. 为`el-form-item`的label添加一个自定义类。 2. 在CSS中设置该类的最小宽度。 ```vue <template> <el-form :model="form"> <el-form-item label="姓名" class="form-item-label"> <el-input v-model="form.name"></el-input> </el-form-item> </el-form> </template> <style> .form-item-label .el-form-item__label { min-width: 100px; /* 设置最小宽度 */ } </style> ``` ### 方法二：使用内联样式 直接在`el-form-item`上使用`style`属性设置最小宽度。 ```vue <template> <el-form :model="form"> <el-form-item label="姓名" :style="{ minWidth: '100px' }"> <el-input v-model="form.name"></el-input> </el-form-item> </el-form> </template> ``` ### 方法三：使用全局样式 如果需要在多个地方使用相同的label最小宽度，可以在全局样式文件中定义一个通用的类。 ```css /* 在全局样式文件中定义 */ .form-label-min-width .el-form-item__label { min-width: 100px; } ``` 然后在组件中使用该类： ```vue <template> <el-form :model="form"> <el-form-item label="姓名" class="form-label-min-width"> <el-input v-model="form.name"></el-input> </el-form-item> </el-form> </template> ``` 通过以上方法，你可以根据具体需求设置`el-form`中label的最小宽度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值