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

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐