当前位置：网站首页>elmentUI表单中input 和select长度不一致问题

elmentUI表单中input 和select长度不一致问题

2022-04-21 16:17:00 【喵酱睡着了】

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>

版权声明
本文为[喵酱睡着了]所创，转载请带上原文链接，感谢
https://blog.csdn.net/sumiao64427/article/details/124318616

边栏推荐

猜你喜欢

随机推荐