新手小白:elementUI的el-input在一行显示

博客记录了在引用ElementUI表单组件添加验证码时,让【发送验证码】按钮与验证码输入框在同一行显示的问题。最初尝试使用display: inline样式未成功,后通过el-row方法解决,虽样式待调整,但问题已解决并记录,希望有更好办法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在引用elementUI的表单组件(自定义的校验规则)时,想添加验证码一项,并且【发送验证码】的button想要实现和验证码的el-input在同一行

通过网上查询资料发现,有人提供了解决办法时使用diaplay:inline样式,尝试发现都没有效果(不知道是不是自己操作的原因!)

所以就另找解决办法,通过el-row的方法解决啦!下面看代码!!!!!

<el-row>
  <el-form-item label="手机号码" prop="pass">
    <el-input type="password" v-model="ruleForm.phoneNumber" autocomplete="off"></el-input>
  </el-form-item>
</el-row>
<el-row>
  <el-form-item label="密码" prop="pass" >
    <el-input type="password" v-model="ruleForm.pass" autocomplete="off" ></el-input>

  </el-form-item >
</el-row>
<el-row>
  <el-form-item label="验证码" prop="checkPass" :inline="ture" >
    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" :inline="ture"></el-input>
  </el-form-item>
  <button :inline="ture">111</button>

</el-row>

运行效果!!!!!(样式有点丑还需要调整,但解决了一个小问题,所以记录一下)

 希望大家有更好的解决办法

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值