1. 情景一

單列布局

對于上圖這種情況，只需要給el-select加上style="width: 100%"即可，如下：

<el-select v-model="fjForm.region" placeholder="請選擇閥門類型" style="width: 100%">
   <el-option label="區(qū)域一" value="shanghai"></el-option>
   <el-option label="區(qū)域二" value="beijing"></el-option>
</el-select>

效果如下

2. 情景二

多列布局

這種情況下再給select加上width：100%，達不到預(yù)期的效果。
這種情況其實是el-select比el-input多了一個下箭頭的icon導(dǎo)致的

解決方案1：
給input加上一個空的icon即可，如下：

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

效果如下：

解決方案2：

使用flex布局，為每個el-form-item都設(shè)置flex:1,并給select設(shè)置width:100%,如下：

• css

.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="區(qū)域一" value="shanghai"></el-option>
              <el-option label="區(qū)域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </div>

效果如下：
文章來源地址http://www.zghlxwxcb.cn/news/detail-702449.html

到了這里，關(guān)于關(guān)于el-input和el-select寬度不一致問題解決的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！