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

最新推荐文章于 2024-03-27 17:43:55 发布

原创最新推荐文章于 2024-03-27 17:43:55 发布 · 3.7k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#elementui #vue.js #javascript

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

在引用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>

运行效果！！！！！（样式有点丑还需要调整，但解决了一个小问题，所以记录一下）