脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → el-form-item表单项label换行

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表单项内容换行内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue单向数据流的深入讲解

    vue单向数据流的深入讲解

    单向数据流方式使用一个上传数据流和一个下传数据流进行双向数据通信,两个数据流之间相互独立,下面这篇文章主要给大家介绍了关于vue单向数据流的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • Vue2中使用axios的3种方法实例总结

    Vue2中使用axios的3种方法实例总结

    axios从功能上来说就是主要用于我们前端向后端发送请求,是基于http客户端的promise,面向浏览器和nodejs,下面这篇文章主要给大家介绍了关于Vue2中使用axios的3种方法,需要的朋友可以参考下
    2022-09-09
  • Vue自定义指令实现弹窗拖拽四边拉伸及对角线拉伸效果

    Vue自定义指令实现弹窗拖拽四边拉伸及对角线拉伸效果

    小编最近在做一个vue前端项目，需要实现弹窗的拖拽，四边拉伸及对角线拉伸，以及弹窗边界处理功能，本文通过实例代码给大家分享我的实现过程及遇到问题解决方法，感兴趣的朋友一起看看吧
    2021-08-08
  • vue使用Element组件时v-for循环里的表单项验证方法

    vue使用Element组件时v-for循环里的表单项验证方法

    这篇文章主要介绍了vue使用Element组件时v-for循环里的表单项验证方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • vue input组件如何设置失焦与聚焦

    vue input组件如何设置失焦与聚焦

    这篇文章主要介绍了vue input组件如何设置失焦与聚焦，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10
  • 一文详解Pinia和Vuex与两个Vue状态管理模式

    一文详解Pinia和Vuex与两个Vue状态管理模式

    这篇文章主要介绍了一文详解Pinia和Vuex与两个Vue状态管理模式，Pinia和Vuex一样都是是vue的全局状态管理器。其实Pinia就是Vuex5，只不过为了尊重原作者的贡献就沿用了这个看起来很甜的名字Pinia
    2022-08-08
  • 一文搞懂Vue3.2中setup语法糖使用

    一文搞懂Vue3.2中setup语法糖使用

    在vue3版本中，引入了一个新的函数，叫做setup。本文将通过实例为大家详细讲讲Vue3.2中setup语法糖的使用，感兴趣的小伙伴可以了解一下
    2022-07-07
  • 解决vue v-for src 图片路径问题 404

    解决vue v-for src 图片路径问题 404

    今天小编就为大家分享一篇解决vue v-for src 图片路径问题 404，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue3封装组件完整实例(带回调事件)

    Vue3封装组件完整实例(带回调事件)

    Vue.js已成为现代Web开发中不可或缺的技术之一,虽然Vue.js的一些基础概念和语法比较易学,但深入挖掘Vue.js的核心概念和功能需要更多的实践,下面这篇文章主要给大家介绍了关于Vue3封装组件(带回调事件)的相关资料,需要的朋友可以参考下
    2023-06-06
  • UniApp在Vue3下使用setup语法糖创建和使用自定义组件的操作方法

    UniApp在Vue3下使用setup语法糖创建和使用自定义组件的操作方法

    通过defineProps定义属性,defineEmits定义事件,computed创建计算属性,emitEvent方法触发事件,在其他组件中导入并使用这些自定义组件,传递属性和监听事件,实现组件的复用性和可维护性,感兴趣的朋友跟随小编一起看看吧
    2024-11-11

最新评论