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

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

时间2025-04-30 23:51:20分类IT科技浏览4571
导读: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
dos查看电脑信息(doscan.exe进程的作用是什么 doscan进程有危险性吗) react to(ReactuseEffect使用教程)