elementUI el-input和el-select一起使用，高度不一致（同一分辨率，不同的缩放比）

最新推荐文章于 2023-09-04 12:08:08 发布
最新推荐文章于 2023-09-04 12:08:08 发布
阅读量1.9k 收藏
点赞数
分类专栏： 常见问题 文章标签： vue.js 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37892558/article/details/115462377
版权

elementUI el-input和el-select一起使用，高度不一致（同一分辨率，不同的缩放比）

场景：
两个元素位于同一个父元素内，同一行

原因：父元素设置了一个固定的高度（height）
解决：去掉父元素的高度

未幻想何以漠然
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
el-select-tree:ElementUI的el-select与el-tree结合
05-07
ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-...
解决vue elementUI 使用el-select 时 change事件的触发问题
01-18
<el v-model=level size=mini placeholder=请选择 change=selectChange()> <el v-for=item key=item.value label=item.label value=item.value></el> </el> 我们需要的是选择之后才触发，但是这样写你会发现，页面...
elmentUI表单中input 和select长度不一致问题
sumiao64427的博客
04-21 7769
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="请选择"
Vue + element ui 实现后台数据渲染到下拉框选项中，同时将input框与下拉框联动，select选定之后，input显示对应的值
热门推荐
Liuliu_x的博客
04-28 1万+
实现过程： 使用element 的select以及input输入框 <el-form-item label="Mid" prop="mid"> <el-select filterable v-model="form.mid" placeholder="请选择" > <el-option v-for="item in midList" :key="item.value" :label="item
新手小白：elementUI的el-input在一行显示
yueyue1111111的博客
04-20 3108
在引用elementUI的表单组件（自定义的校验规则）时，想添加验证码一项，并且【发送验证码】的button想要实现和验证码的el-input在同一行。通过网上查询资料发现，有人提供了解决办法时使用diaplay：inline样式，尝试发现都没有效果（不知道是不是自己操作的原因！（样式有点丑还需要调整，但解决了一个小问题，所以记录一下）所以就另找解决办法，通过el-row的方法解决啦！希望大家有更好的解决办法。
eleUi解决表单中el-select选择器比el-input输入框小的问题
ZWP_990527的博客
12-01 2148
解决el-input、el-select和el-date-picker等元素宽度不相同的问题。
element ui - el-select 手动设置高度
nunumaymax的博客
06-20 4856
当我们的页面想要手动设置 element ui 中 el-select 的高度时，如果只是通过设置 el-select 的 height 属性时，会发现调整无效。继续对 el-select 中的 input 元素 .el-input__inner 设置。会发现高度生效了，但是右侧的下拉框箭头移位了。如下提供一种可以调整。
element-ui 修改级多选联选择器或多选下拉输入框的高度，并不影响多选后内容撑起高度。
lxzcaicai的博客
03-31 3394
大家在做项目的时候
vue使用element-ui的el-input监听不了回车事件的解决方法
08-28
小编在使用element-ui时，el-input组件监听不了回车事件，怎么回事呢？下面小编给大家带来了vue使用element-ui的el-input监听不了回车事件的解决方法，一起看看吧
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
10-17
在开发中，需要表格控件根据浏览器高度进行调整，固定表头，本文主要介绍了VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法，非常具有实用价值，需要的朋友可以参考下
vue:el-input输入时限制输入的类型操作
10-15
主要介绍了vue:el-input输入时限制输入的类型操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
【解决方法】element-ui 中输入框input与下拉选择框没有在一条水平线上
追寻上飞的博客
07-19 1626
可以看到行元素内的子元素顶部都是对齐的，而且下拉选择框的顶部和行的顶部是有间隙的，因此问题就出现在对齐的属性上。如图所示，左边的输入框和右边的下拉选择框不在同一水平线上。相对于该元素所在行的基线的垂直对齐。...
在el-select多选框里面设置input搜索框并能实现搜索功能
熬夜搬码员的博客
06-01 5428
思路： 通过给搜索框设置点击事件，oninput 当input的value值发生变化时就会触发，（与onchange的区别是不用等到失去焦点就可以触发了）
关于el-input和el-select宽度不一致问题解决
最新发布
jieyucx的博客
09-04 3335
这种情况下再给select加上width：100%，达不到预期的效果。
elementUI el-input el-select输入框 设置高度和宽度
q1054007919的博客
10-28 6342
//html模块 <div class="relicMapSearch"> <el-input v-model="input1" placeholder="请输入景点名称" id="input1"/> <el-select v-model="value" placeholder="西安市" id="select"> <el-option v-for="item in options" :key="item.value" :label.
如何设置＜el-input＞的高度
m0_62855212的博客
05-05 3874
通过查看element的官方文档，才知道要设置<el-input>的高度，需要使用。总结：通过改变rows行数大小，就可以改变<el-input>的高度了。
Select input 两个元素的宽度高度跟设定值不一致的问题
weixin_30613433的博客
08-24 450
　　在做登录框的时候，需要一个select 元素作为账号输入，一个input作为密码输入框。在css 文件中，将这两个元素的position 设置为relative ，并且width 设置为100%。刷新页面后发现，两个元素的长度居然不是一样的。最终在stackoverflow 中找到了答案。原来，实际宽度 = width + padding + border，实际高度 = height + pa...
element ui - el-select 添加可输入功能
nunumaymax的博客
11-23 8772
vue2 + element ui 的项目中，产品希望 el-select 可以支持输入功能，也就说用户既可以下拉选择，也可以输入任意内容。
elementui el-input 只能输入数字和-
05-26
你可以使用 `el-input` 组件的 `onkeypress` 事件和 JavaScript 的正则表达式来限制用户输入。以下是一个示例： ```html <template> <el-input v-model="inputValue" @keypress="onKeypress"></el-input> </template> <script> export default { data() { return { inputValue: '', }; }, methods: { onKeypress(event) { const regex = /[-0-9]/; const char = String.fromCharCode(event.keyCode); if (!regex.test(char)) { event.preventDefault(); } }, }, }; </script> ``` 在这个示例中，我们监听了 `el-input` 的 `@keypress` 事件，并传递了一个事件对象作为参数。在 `onKeypress` 方法中，我们使用正则表达式 `/[-0-9]/` 来匹配数字和 `-`，并使用 `String.fromCharCode` 方法获取用户按下的字符。如果用户输入的字符不符合正则表达式，则调用 `event.preventDefault()` 方法阻止默认行为，从而限制用户输入。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值