element表单el-form的label自适应宽度的实现
更新时间：2022年08月12日 11:49:34 作者：ppandpp
本文主要介绍了element表单el-form的label自适应宽度的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在ElementUI官方文档中el-form提供了一个参数 label-width：
可以在form表单中设置label-width宽度（作为 Form 直接子元素的 form-item 会继承该值），但问题来了，如果不确定标签的长度，给固定值容易造成过长标签的换行，导致页面布局错乱。
所以把label-width设置为auto
<el-form ref="form" :model="form" label-width="auto" size="small" > </el-form>
这样label就会自适应标签的长度了，效果如下 ↓
注意：如果给固定值，则还可以设置label标签的对齐方式 label-position="left"
下图就是通过设置label-width=150px;label-position="left出来的效果，遇到标签过长的字段名称只能在单独的el-form-item标签中设置label-width
到此这篇关于element表单el-form的label自适应宽度的实现的文章就介绍到这了,更多相关element el-form label自适应宽度内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文给大家详细讲述了Vue2.0中集成UEditor富文本编辑器的方法以及相关注意事项做了讲述，有兴趣的朋友学习下。2018-03-03
这篇文章主要介绍了Vue.js 实现tab切换并变色操作讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
在一些网站经常可以看到切换语言包,将网站转化成多种语言版本的情况,下面这篇文章主要给大家介绍了关于vue中i18n的安装与几种使用方式的相关资料,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了vue源码nextTick使用及原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
本文主要介绍了Vue实现登录功能全套详解（含封装axios），文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要介绍了vue如何还原data中数据-重置问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
vue element-ui el-cascader级联选择器数据回显的两种实现方法
这篇文章主要介绍了vue element-ui el-cascader级联选择器数据回显的两种实现方法，具有很好的参考价值，希望对大家有所帮助。2023-07-07
vue vantUI实现文件（图片、文档、视频、音频）上传（多文件）
这篇文章主要介绍了vue vantUI实现文件（图片、文档、视频、音频）上传（多文件），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
在 Vue 的项目中，我们经常会遇到 v-if、v-show、v-for 或 v-model 这些内置指令，它们为我们提供了不同的功能。除了使用这些内置指令之外，Vue 也允许注册自定义指令。接下来，将使用Vue 3官方文档自定义指令章节中使用的示例，来一步步揭开自定义指令背后的秘密。2021-05-05
本文主要介绍了在VueRouter中,meta对象的使用和配置方式,meta对象可以包含任何你希望附加到路由的自定义信息,这些配置信息可以灵活的满足你的应用需求,使得路由配置更具灵活性和可扩展性2024-10-10
最新评论