关于el-input和el-select宽度不一致问题解决-Toy模板网

这篇具有很好参考价值的文章主要介绍了关于el-input和el-select宽度不一致问题解决。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1. 情景一

单列布局

关于el-input和el-select宽度不一致问题解决,菜鸟的踩坑之旅,vue.js,前端,javascript
对于上图这种情况，只需要给el-select加上style="width: 100%"即可，如下：

<el-select v-model="fjForm.region" placeholder="请选择阀门类型" style="width: 100%">
   <el-option label="区域一" value="shanghai"></el-option>
   <el-option label="区域二" value="beijing"></el-option>
</el-select>

效果如下

关于el-input和el-select宽度不一致问题解决,菜鸟的踩坑之旅,vue.js,前端,javascript

2. 情景二

多列布局
关于el-input和el-select宽度不一致问题解决,菜鸟的踩坑之旅,vue.js,前端,javascript
这种情况下再给select加上width：100%，达不到预期的效果。
这种情况其实是el-select比el-input多了一个下箭头的icon导致的

解决方案1：
给input加上一个空的icon即可，如下：
关于el-input和el-select宽度不一致问题解决,菜鸟的踩坑之旅,vue.js,前端,javascript

<el-input v-model="fjForm.name" size="medium" suffix-icon=“xxxx”></el-input>

效果如下：
关于el-input和el-select宽度不一致问题解决,菜鸟的踩坑之旅,vue.js,前端,javascript

解决方案2：

使用flex布局，为每个el-form-item都设置flex:1,并给select设置width:100%,如下：

.box-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

html

        <div class="box-flex">
          <el-form-item label="阀井名称" style="flex: 1">
            <el-input v-model="fjForm.name" size="medium"></el-input>
          </el-form-item>
          <el-form-item label="阀井编号" style="flex: 1">
            <el-input v-model="fjForm.overlayId" size="medium"></el-input>
          </el-form-item>
        </div>
       <div class="box-flex">
          <el-form-item label="阀门大小" style="flex: 1">
            <el-input v-model="fjForm.valueSize" size="medium"></el-input>
          </el-form-item>
          <el-form-item label="阀门类型" style="flex: 1">
            <el-select v-model="fjForm.valveType" placeholder="请选择阀门类型" style="width: 100%">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </div>