element-ui实现一列展示两个输入框

最新推荐文章于 2023-12-02 19:20:21 发布

原创最新推荐文章于 2023-12-02 19:20:21 发布 · 2.3k 阅读 ·

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

萌新之路

关注

标签

#javascript #vue.js #前端

分类前端开发

收录于

element 专栏收录该内容

11 篇文章

订阅专栏

文章展示了在Vue.js应用中使用ElementUI库创建一个弹性布局的输入框组合，用于输入CM和日的周期信息。代码包括了HTML结构和SCSS样式，其中应用了flex布局来调整输入框的显示。

效果图：
在这里插入图片描述

代码：

<el-col :span="8">
              <el-form-item label="周期：">
                <div class="monthAndKmStyle">
                  <el-input v-model="addForm.name" placeholder="请输入CM" style="margin-right: 3px;"/>
                  CM/
                  <el-input v-model="addForm.name" placeholder="请输入日" style="margin-left: 5px;"/>
                  日
                </div>
              </el-form-item>
            </el-col>

scss：

<style lang="scss" scoped>
	.monthAndKmStyle{
	    display: flex;
	    ::v-deep{
	      .el-input{
	        width: 50%;
	        display: inline-block;
	      }
	    }
	  }
</style>