【elementUI】el-select选择框位置错位、偏移bug

这篇具有很好参考价值的文章主要介绍了【elementUI】el-select选择框位置错位、偏移bug。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在el-select组件中,可能会由于option选项过多而导致下拉框位置错乱、偏移的情况,我个人试验大概是在5-6个option以上时,该bug就会出现。

这个时候需要手动为下拉框设置: popper-append-to-body="false" 属性,并设置以下CSS样式解决问题:文章来源地址https://www.toymoban.com/news/detail-613355.html

.el-select .el-select-dropdown {
  transform:translateX(-5px); 
} 

到了这里,关于【elementUI】el-select选择框位置错位、偏移bug的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • elementUI中el-select数据分页懒加载实现

    工作中使用elementUI框架时, 会经常用到下拉框展示数据,如果数据量很大会影响页面的渲染加载速度。遇到这种情况,通常后端代码会将数据做成分页查询,前端下拉框组件也要支持滑动到底部会自动加载下一页数据。话不多说,直接上代码。 这样子组件下拉框就实现了检索、

    2024年02月12日
    浏览(52)
  • el-select范围选择框

    仅供参考,具体的实现可能根据自己的需要修改 ,仅供参考!仅供参考!仅供参考!

    2024年02月11日
    浏览(47)
  • element el-select下拉框选择失效

    2023.1.11今天我学习了使用element el-select组件下拉框选择数据失效的原因以及解决办法。 如图:   当我已经选择启用状态的时候,然后点击停用状态没反应。 是因为在配置表单的过程中,重复使用了这个字段。 如: 就是在表单中重复使用了status这个字段,然后导致选择失效。

    2024年02月16日
    浏览(45)
  • vue+elementUI el-select 中 没有加clearable出现一个或者多个×清除图标问题

    1、现象:下方截图多×清除图标了 2、在全局common.scss文件中加一个下方的全局样式noClear 3、在多×清除图标的组件上层div加noClear样式 4、 ×清除图标去除成功

    2024年01月19日
    浏览(49)
  • 基于elementUI封装的带复选框el-checkbox的下拉多选el-select组件

    组件:MultipleSelect.vue 使用:index.vue 多选框多选不换行

    2024年01月22日
    浏览(51)
  • Vue中ElementUI结合transform使用时,修复el-select弹框定位不准确问题

            在大屏开发中,比如将1920*1080放到更大像素(3500*2400)大屏上演示,此时需要使用到transform来对页面进行缩放,但是此时发现弹框定位出错问题,无法准备定位到实际位置。之前写过一篇讲解的是ElementUI中的el-date-picker /组件修复定位问题,经过网友不断发现和提

    2024年01月19日
    浏览(49)
  • (vue)el-select选择框加全选/清空/反选

    js 解决参考 1.全选/清空/反选 2.全选/反选

    2024年04月25日
    浏览(46)
  • el-select与el-tree结合使用,实现select框下拉使用树形结构选择数据

    使用el-select与el-tree,实现如下效果, 代码如下:  注意点:搜索input框的代码一点放在option上面,不要放在option里面,否则一点击搜索框,下拉框就会收起来,不能使用。

    2024年02月13日
    浏览(57)
  • 【Vue2 + ElementUI】更改el-select的自带的下拉图标为倒三角,并设置相关文字颜色和大小

    效果图 实现 总结 将el-select自带的下拉选择图标(如下图 1- 箭头),替换成自定义图标(如下图 2- 倒三角) (1)利用控制台找到 图 1 所在的位置,如下该图标是通过 伪类元素 添加的。 (2) 替换为 图 2   ① 只更改图标,不更改大小 在图标库(例 elementUI)找对应的图标

    2024年01月25日
    浏览(48)
  • vue拿到下拉框el-select的选择项的value和label

    1.单独一个下拉框时 2.el-table每行数据都有下拉框时   思路: 1.首先选择下拉框事件拿到选择的这行数据scope.row  2.其次去遍历绑定的下拉框数据,使用find()方法查找item.value === row.value  3.找到则返回对应的row.label   4.最后将label值以键值对形式加到row对象中 代码实例:

    2024年02月11日
    浏览(121)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包