el-input和el-select的框的宽度自适应不一致问题

最新推荐文章于 2025-09-11 04:47:07 发布

原创最新推荐文章于 2025-09-11 04:47:07 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #elementui

在ElementUI框架下，当遇到el-input和el-select组件在自适应宽度上不匹配时，可以通过设置el-select的样式width:100%来实现两者宽度一致。文章展示了具体的代码实现，包括el-form-item中的el-input和el-select组件的使用，以及v-if和v-else指令的条件渲染。

在实际elemen ui中 el-input与el-select自适应中输入框长度不一致如何解决？实际上就是在el-select中加上style="width:100%"

效果图

 <el-form-item prop="name" label="角色名称" >
            <el-input
              v-if="dialogStatus !=='设置'"
              v-model="role.name"
            ></el-input>
            <span v-else>{{ role.name }}</span>
          </el-form-item>
          <el-form-item prop="level" label="级别">
            <el-select v-model="role.level" placeholder="请选择" style="width: 100%;">
              <el-option
                v-for="item in levelOptions"
                :key="item.id"
                :label="item.name"
                :disabled="level>=item.id"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>