首页IT科技el-form-item label(elementui中表单el-form的label如何设置宽度)

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

时间2025-06-20 00:40:25分类IT科技浏览5299
导读: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"                                                 @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"                                                 class="input-width"                         clearable>                     </el-input>                   </el-form-item>                 </span>  </el-form>   

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

声明:本站所有文章               ,如无特殊说明或标注    ,均为本站原创发布            。任何个人或组织                     ,在未征得本站同意时                  ,禁止复制              、盗用                       、采集      、发布本站内容到任何网站          、书籍等各类媒体平台                    。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理            。

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
linux禁止ping(Linux禁止ping或允许ping的设置方法) day07-Vue04