el-form-item中表单项label和表单项内容换行实现方法
更新时间：2023年09月22日 11:24:04 作者：Hyanl
这篇文章主要给大家介绍了el-form-item中表单项label和表单项内容换行实现的相关资料,每个表单el-form由多个表单域el-form-item组成,需要的朋友可以参考下
elemnet ui的el-form-item的表单项label和表单项内容原本是默认在同一行显示的，将el-form-item中表单项label和表单项内容换行怎么实现呢？
效果如下：
法1：elemnetUI官方的方法label-position=“top”
法2：
思路：将el-form或者el-form-item中的label-width属性去掉或者设置为0，如果label长度超出一行需要设置以下样式属性：加上如下样式代码：
<style scoped>
/deep/ .el-form-item__label{
text-align:left;
float: none;
word-break: break-word;
}
</style>附：el-form的label过长换行+根据label长度自动撑开
先上效果图
1、在需要换行的label进行改写，以及绑定class
<el-form-item :label="'活动名称\n（换行）'" class="fold_label" prop="name">
<el-input v-model="filterForm.name"></el-input>
</el-form-item>label中需要换行的地方加上‘\n’
2、css
/* 过于长的label分两行展示样式 */
.fold_label .el-form-item__label {
white-space: pre-line;
text-align-last: justify;
text-align: justify;
margin-top: -4px;
line-height: 25px;
text-justify: distribute-all-lines;
}
/* 其他label根据宽度自动撑开 */
.el-form-item__label {
text-align-last: justify;
text-align: justify;
text-justify: distribute-all-lines;
}这里如果不起作用可以用deep穿透一下
总结
到此这篇关于el-form-item中表单项label和表单项内容换行实现的文章就介绍到这了,更多相关el-form-item表单项内容换行内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue3中reactive的对象清空所引发的问题解决方案(清空不了和清空之后再去赋值就赋值不了)
在使用reactive定义的变量时,直接赋值会失去响应式,为了清空 filters并确保响应式,可以使用Object.assign({}, filters)或者遍历对象逐个清除属性,本文介绍vue3中reactive的对象清空所引发的问题解决方案(清空不了和清空之后再去赋值就赋值不了),感兴趣的朋友一起看看吧2025-02-02
这篇文章主要介绍了Vue之文件加载执行全流程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了vue $router和$route的区别详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
这篇文章主要介绍了el-table 选择框根据条件设置某项不可选中的操作代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-03-03
vue2.x版本中computed和watch的使用及关联和区别
这篇文章主要介绍了vue2.x版本中computed和watch的使用及关联和区别，文章围绕主题展开详细的内容介绍，需要的小伙伴可以参考一下2022-07-07
这篇文章主要为大家详细介绍了Vue编写炫酷的时钟插件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
下面小编就为大家分享一篇浅谈vue单一组件下动态修改数据时的全部重渲染，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要为大家介绍了命令行CLI一键生成各种烦人的lint配置实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要为大家详细介绍了vue中使用stompjs实现mqtt消息推送通知，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要介绍了vue中el-input绑定键盘按键(按键修饰符)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
最新评论