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

1. 情景一

单列布局


对于上图这种情况,只需要给el-select加上style="width: 100%"即可,如下:

html 复制代码
<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>

效果如下

2. 情景二

多列布局

这种情况下再给select加上width:100%,达不到预期的效果。
这种情况其实是el-select比el-input多了一个下箭头的icon导致的

解决方案1:
给input加上一个空的icon即可,如下:

html 复制代码
<el-input v-model="fjForm.name" size="medium" suffix-icon="xxxx"></el-input>        

效果如下:

解决方案2:

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

  • css
css 复制代码
.box-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
  • html
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>

效果如下:

相关推荐
安全系统学习1 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖1 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖1 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水2 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐2 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06272 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台2 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121382 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴2 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
AntBlack3 小时前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python