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自适应宽度内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了Vant Uploader实现上传一张或多张图片组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
vue + element-ui 季度选择器组件 el-quarter-picker示例详解
本文介绍如何在Vue项目中使用基于Element-UI的季度选择器组件ElQuarterPicker,通过引用并调用ElQuarterPicker.vue组件来实现季度选择功能,感兴趣的朋友跟随小编一起看看吧2024-09-09
vue父组件给子组件的组件传值provide inject的方法
在本篇文章里小编给大家整理的是一篇关于vue父组件给子组件的组件传值provide inject的方法，需要的朋友们学习下。2019-10-10
这篇文章主要介绍了Vue 内置指令梳理总结，文章首先从v-text指令展开内容介绍，具有一定的知识性参考价值，需要的小伙伴可以参考一下2022-05-05
在Vue.js项目中使用vue-router的history模式时,直接访问或刷新页面可能会导致404错误,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定参考借鉴价值,需要的朋友可以参考下2024-11-11
diff算法的本质是找出两个对象之间的差异,目的是尽可能复用节点。,下面这篇文章主要给大家介绍了关于Vue中diff算法的相关资料,需要的朋友可以参考下2021-09-09
最近公司新启动了个项目，用的是vue框架在做,下面这篇文章主要给大家介绍了关于vue实现token登录验证的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了vue组件中修改组件外元素样式,本文给大家分享两种解决方案帮助大家解决这样的问题，结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-05-05
这篇文章主要介绍了vue截取视频第一帧的图片问题,基本就是用cavas进行绘制，解决一下跨域问题，截视频第一帧，然后根据视频原本的宽高进行绘制，最后转一下图片格式即可，需要的朋友可以参考下2022-11-11
这篇文章主要为大家介绍了简单却不失优雅、小巧而不乏大匠的Vue.js,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
最新评论