elmentUI表单中input 和select长度不一致问题
1.问题现象:2.问题原因:因为el-select右边有一个icon图标(右边的padding为35px),而el-input只有15px,所以就存在了一个宽度的误差.3.解决方法:方法一:当下拉列表 style="width:92%"时,可以与input输入框大小一致<el-form-item label="图标类型" prop="iconId"><el-select v-mo
·
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>
更多推荐
已为社区贡献3条内容
所有评论(0)