element ui 如何在一行放置三个输入框和两个按钮

代码示例:

复制代码
<el-form :model="form" :rules="rules" label-width="80px" inline>
  <el-row>
    <el-col :span="6">
      <el-form-item label="First" word prop="first">
        <el-input v-model="form.first" placeholder="First"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="Second" word prop="second">
        <el-input v-model="form.second"
          placeholder="Second"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="Third" word prop="third">
        <el-input v-model="form.third" placeholder="Third"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="3">
      <el-button type="primary">First button</el-button>
    </el-col>
    <el-col :span="3">
      <el-button type="success">Second button</el-button>
    </el-col>
  </el-row>
</el-form>
复制代码

核心是使用element ui的<el-row>配合<el-col>进行布局;文字和input,可以分别放到不同的<el-col>标签内。

当前也可以使用<el-form>配合<el-form-item>可以给每个输入框前显示文本。

 

当然也可以直接将文本放在单独的<el-col>标签内。如果和<input>标签放在一个<el-col>标签内,会变形,需要自己调整样式。

posted on   荆棘人  阅读(2287)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
历史上的今天:
2020-09-12 IDEA项目结构
2019-09-12 javascript数据判断是否有指定元素
2019-09-12 Socket的一些疑惑整理

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

统计

点击右上角即可分享
微信分享提示