iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >elementui中表单el-form的label如何设置宽度
  • 755
分享到

elementui中表单el-form的label如何设置宽度

2024-04-02 19:04:59 755人浏览 安东尼
摘要

目录element ui中表单el-fORM的label设置宽度在el-form-item 重置label宽度element ui中表单el-form的label设置宽度 测试要求把

element ui中表单el-form的label设置宽度

测试要求把输入框前面的名字带括号的把括号部分显示在下一行,可以通过设置前面的label宽度来进行换行。

在具体的el-form-item中设置label-width,

也可以为整个表单el-form设置label-width,这样整个页面的label宽度统一。

例:

<el-form label-width="100px">

在el-form-item 重置label宽度

//在el-form 设置 label宽度 label-width=“120px”

<el-form :model="ruleFormOne" :rules="rules" ref="ruleFormOne" label-width="120px">
          <el-form-item label="活动标题:" prop="name">
                    <el-input
                        :disabled="isDisabledPart"
                        class="p-inputCount"
                        type="text"
                        v-model="ruleFormOne.name"
                        placeholder="请输入标题,限16个字"
                        maxlength = "16"
                        style="width: 300px"
                        @input = "formatName"
                        show-Word-limit
                        clearable
                        >
                    </el-input>
           </el-form-item>   

//在el-form-item 重置label宽度,label-width=“50px”

           <el-form-item label="" label-width="50px" > 
            活动期间内,会员每拥有
              <span class="inline-block">
                <el-form-item 
                    prop="items[0].eventtimes" >
                   <el-input
                        v-model="ruleFormOne.items[0].eventtimes"
                        :disabled="true"
                        style="width: 60px"
                        class="input-width"
                        clearable>
                    </el-input>
                  </el-form-item>
                </span>
 </el-form>   

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: elementui中表单el-form的label如何设置宽度

本文链接: https://www.lsjlt.com/news/168929.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • elementui中表单el-form的label如何设置宽度
    目录element ui中表单el-form的label设置宽度在el-form-item 重置label宽度element ui中表单el-form的label设置宽度 测试要求把...
    99+
    2024-04-02
  • Vue3 Element Plus中el-form表单组件如何使用
    这篇文章主要讲解了“Vue3 Element Plus中el-form表单组件如何使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue3 Element&n...
    99+
    2023-07-06
  • html表格如何设置宽度
    这篇文章将为大家详细讲解有关html表格如何设置宽度,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。html表格设置宽度的方法:首先创建一个HTML示例文件;然后通过table创建一个表格;最后通过设置ta...
    99+
    2023-06-15
  • 如何在ElementUI的上传组件el-upload中设置header
    目录在ElementUI上传组件el-upload中设置headerelement-ui中的upload组件使用总结在ElementUI上传组件el-upload中设置header ...
    99+
    2024-04-02
  • vue如何给element-ui中的el-tabs动态设置label属性
    目录给element-ui中的el-tabs动态设置label属性关于element-ui-tabs标签的基本使用给element-ui中的el-tabs动态设置label属性 效果...
    99+
    2022-11-13
    vue element-ui element-ui中el-tabs 动态设置label属性
  • html中的div如何设置宽度
    这篇文章主要介绍html中的div如何设置宽度,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! html div设置宽度的方法:1、给div元素添加“wid...
    99+
    2024-04-02
  • html中如何设置input的宽度
    这篇文章主要介绍了html中如何设置input的宽度,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 html中设...
    99+
    2024-04-02
  • html中td如何设置宽度
    小编给大家分享一下html中td如何设置宽度,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!html td设置宽度的方法:1、直接使用td标签的width属性,语法格式“<td width="宽度值"...
    99+
    2023-06-15
  • css如何设置单元格的高度宽度自适应
    这篇文章给大家分享的是有关css如何设置单元格的高度宽度自适应的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 设置单元格的高度宽度自适应的方法:1、给...
    99+
    2024-04-02
  • HTML中如何设置元素的宽度
    HTML是一种标记语言,它被广泛地应用于网页制作中。在网页制作中,控制元素的大小往往是一个关键问题。设置元素的宽度,就是解决该问题的一个重要方法。本文将详细介绍HTML中如何设置元素的宽度。一、HTML中的宽度设置在HTML中,要设置元素的...
    99+
    2023-05-14
  • css如何设置span的宽度
    这篇文章给大家分享的是有关css如何设置span的宽度的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。css设置span宽度的方法:首先使用“display:block;”或“display:inline-bloc...
    99+
    2023-06-15
  • 如何在HTML中设置table宽度
    这期内容当中小编将会给大家带来有关如何在HTML中设置table宽度,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。给table标签使用border属性添加边框后,默认宽度有里面的内容决定:<tabl...
    99+
    2023-06-15
  • css如何设置hr的宽度
    这篇文章主要讲解了“css如何设置hr的宽度”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css如何设置hr的宽度”吧! 在cs...
    99+
    2024-04-02
  • 如何解决表格设置table-layout:fixed后对单元格宽度设置无效的问题
    本篇内容主要讲解“如何解决表格设置table-layout:fixed后对单元格宽度设置无效的问题”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何解决表格设置...
    99+
    2024-04-02
  • css如何设置table的宽度为自适应宽度
    这篇文章主要介绍“css如何设置table的宽度为自适应宽度”,在日常操作中,相信很多人在css如何设置table的宽度为自适应宽度问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解...
    99+
    2024-04-02
  • css如何设置边框的宽度
    本篇内容主要讲解“css如何设置边框的宽度”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css如何设置边框的宽度”吧!在css中可以使用border-width属性来设置边框的宽度。示例:<...
    99+
    2023-07-04
  • vue使用elementui的el-date-picker设置样式无效如何解决
    今天小编给大家分享一下vue使用elementui的el-date-picker设置样式无效如何解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面...
    99+
    2023-07-05
  • CSS如何设置图像的宽度和高度
    这篇文章给大家分享的是有关CSS如何设置图像的宽度和高度的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 CSS的width和height属性用来指定图像的宽度和高度。 默认情...
    99+
    2024-04-02
  • css中如何设置表单的样式
    这篇文章将为大家详细讲解有关css中如何设置表单的样式,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 设置表单的样式 属性选择器在为不带有 class 或 id 的表...
    99+
    2024-04-02
  • 探讨UniApp如何设置组件的宽度
    最近,随着UniApp在开发中的广泛应用,一些关于样式设置的问题烦扰着许多开发者,其中一个比较普遍的问题是“UniApp如何设置组件的宽度”。这篇文章将会对这个问题进行探讨并提供解决方案。在Vue.js中,我们可以使用style属性来设置组...
    99+
    2023-05-14
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作