1.问题现象:
在这里插入图片描述

2.问题原因:
因为el-select右边有一个icon图标(右边的padding为35px),而el-input只有15px,所以就存在了一个宽度的误差.
在这里插入图片描述

在这里插入图片描述
3.解决方法:
方法一:当下拉列表 style="width:92%"时,可以与input输入框大小一致

<el-form-item label="图标类型" prop="iconId">
    <el-select v-model="addEditForm.iconId" placeholder="请选择" clearable @change="onIconChange" style="width:92%">
        <el-option
            v-for="item in iconData"
            :key="item.ID"
            :label="item.TBMC"
            :value="item.ID"
         />
    </el-select>
</el-form-item>

方法二:使用占位图标:也在右边的位置默认追加一个图标,字体颜色设置为透明或背景色,使其看上去宽度相等
此方法问题:输入框字体过长时,在最右方的占位图标处无法显示。

<el-form-item label="名称:" prop="name">
    <el-input v-model="addEditForm.name" placeholder="请输入" suffix-icon="xxxx" />
</el-form-item>
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐