el-form的label和表单自适应填满一行且靠左对齐方式
更新时间：2022年10月08日 10:43:08 作者：RAY_CHEN.
这篇文章主要介绍了el-form的label和表单自适应填满一行且靠左对齐方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
el-form的label和表单自适应填满一行且靠左对齐
如图：label和content均向左靠齐，且填满整行；
.el-form-item__label-wrap {
margin-left: 0px !important;
}
.el-form-item__label{
word-break: keep-all !important;
}
.el-form-item__content{
margin: 0 !important;
width: -webkit-fill-available;
}
.el-input.el-input--medium,.el-select.el-select--medium {
width: 100%;
}
.el-form-item.el-form-item--medium {
display: flex;
justify-content: start;
}word-break:keep-all;文字保持一行width:-webkit-fill-available;宽度自适应；
element ui表单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
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在现代前端开发中,拖拽功能是增强用户体验的重要手段之一,本文将详细介绍如何在Vue3中封装一个拖拽指令并通过实战例子演示其实现过程,希望对大家有所帮助2024-11-11
这篇文章主要为大家详细介绍了vue2实现数据请求显示loading图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
Echarts，它是一个与框架无关的 JS 图表库，但是它基于Js，这样很多框架都能使用它，例如Vue，估计IONIC也能用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
今天小编就为大家分享一篇vuejs前后端数据交互之从后端请求数据的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了详解vue-cli3多页应用改造，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-06-06
ref 和 reactive 是 Composition API 中用来创建响应式数据的两个核心函数,在本篇文章中,我们将详细讲解如何使用 ref 和 reactive 来创建响应式数据,并展示它们之间的区别和使用场景,需要的朋友可以参考下2024-11-11
这篇文章主要为大家介绍了vue3动态绑定背景图片实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-10-10
elmentui是一款为vue设计的桌面组件库,下面这篇文章主要给大家介绍了关于解决vue3使用element-ui的具体操作,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
setup是Vue3中引入的一个新的组件选项，是Vue3中函数式组件的核心部分，它提供了一种新的方式来编写组件逻辑，下面就来和大家讲讲它的使用和原理2023-08-08
这篇文章主要介绍了Vue项目打包部署总结篇,关于Vue项目发布的相关问题就先总结这么多,几乎在每一步都踩过坑才有所体会,有问题欢迎各位同学一起探讨,需要的朋友可以参考下2024-08-08
最新评论