如何解决element-ui中select下拉框popper超出弹框问题

 更新时间:2024年04月27日 11:52:11   作者:j-ymg  
这篇文章主要介绍了如何解决element-ui中select下拉框popper超出弹框问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

问题场景

如下:

尝试了好几种解决方法,比如从下拉框el-popper使用fixed定位入手,修改popper-append-to-body,或者修改z-index

看了源码后又尝试监听表格滚动使用`this.$refs.table.handleClose()`关闭popper,但都未达到我想要的效果。

尝试了网上一些解决方案,跟我之前的尝试一样,只有拖动滚动条停止的时候popper消失,滑动鼠标滚轮则无效。无奈我只好直接修改源码的visible来关闭popper,

解决方法如下:

解决方法

1、先把element-ui下select.vue的源码单独拎出来

添加自己的代码(另外还需修改导入路径)形成组件Select.vue。

改动如下:

(1) 修改源码import路径

import Emitter from 'element-ui/src/mixins/emitter';
import Focus from 'element-ui/src/mixins/focus';
import Locale from 'element-ui/src/mixins/locale';
import ElInput from 'element-ui/packages/input';
import ElTag from 'element-ui/packages/tag';
import ElScrollbar from 'element-ui/packages/scrollbar';
import debounce from 'element-ui/node_modules/throttle-debounce/debounce';
import Clickoutside from 'element-ui/src/utils/clickoutside';
import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';
import scrollIntoView from 'element-ui/src/utils/scroll-into-view';
import { getValueByPath, valueEquals, isIE, isEdge } from 'element-ui/src/utils/util';
import { isKorean } from 'element-ui/src/utils/shared';
import NavigationMixin from 'element-ui/packages/select/src/navigation-mixin';
import ElOption from 'element-ui/packages/select/src/option';
import ElSelectMenu from 'element-ui/packages/select/src/select-dropdown';

(2) 在select.vue源码的基础上接收父组件传来的scrollTop,监听scrollTop的改变使visible为false。

props: {
    // 源码上新增:父组件表格滚动条
    scrollTop: {
      type: Number,
      default: 0,
    },
  },
  
  watch: {
    //  源码上新增:滚动条滚动就隐藏下拉框
    scrollTop() {
      this.visible = false;
    },
  }

2、把el-select改成Select组件

监听滚动条的滚动,滚动就隐藏下拉框

主要代码如下:

import Select from '@/components/common/select';

components: { Select },
data() {
    return {
      tempTableBody: null,
      // 滚动条位置,用来判断滚动条滚动隐藏下拉框
      scrollTop: 0,
    };
  },
  
  mounted() {
    this.onscroll();
  },
  methods: {
    // 监听table的bodyWrapper的滚动
    onscroll() {
      this.$nextTick(() => {
        this.tempTableBody= this.$refs.editTempTable.bodyWrapper;
        if (this.tempTableBody) {
          this.tempTableBody.addEventListener('scroll', this.handleScroll, false);
        }
      });
    },
    // 滚动条出现滚动就改变scrollTop的值
    handleScroll() {
      this.scrollTop = this.tempTableBody.scrollTop;
      // this.$refs.matchField.handleClose();
    },
  }    

总结

至此,就成功解决这个问题了。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue中子组件的methods中获取到props中的值方法

    vue中子组件的methods中获取到props中的值方法

    今天小编就为大家分享一篇vue中子组件的methods中获取到props中的值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Vant中Popover气泡弹出框位置错乱问题解决

    Vant中Popover气泡弹出框位置错乱问题解决

    这篇文章主要为大家介绍了Vant中Popover气泡弹出框位置错乱问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • vue实现下拉框二级联动效果的实例代码

    vue实现下拉框二级联动效果的实例代码

    这篇文章主要介绍了vue实现下拉框二级联动效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-11-11
  • Vue cli+mui 区域滚动的实例代码

    Vue cli+mui 区域滚动的实例代码

    下面小编就为大家分享一篇Vue cli+mui 区域滚动的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • VUE生命周期全面系统详解

    VUE生命周期全面系统详解

    Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程,称这是Vue的⽣命周期
    2022-07-07
  • Vue项目npm run dev启动失败的6个常见原因(附解决方案)

    Vue项目npm run dev启动失败的6个常见原因(附解决方案)

    Vue 项目启动是前端开发的基础操作,但很多新手(甚至有经验的开发者)都会遇到npm run dev(或 npm run serve)启动失败的问题,下面就来介绍一下失败的原因及解决方案,感兴趣的可以了解一下
    2026-01-01
  • 实现vuex与组件data之间的数据同步更新方式

    实现vuex与组件data之间的数据同步更新方式

    今天小编就为大家分享一篇实现vuex与组件data之间的数据同步更新方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue搜索高亮popsearch组件的实现示例

    vue搜索高亮popsearch组件的实现示例

    有时候给页面内容添加一个关键词搜索功能,如果搜索结果能够像浏览器搜索一样高亮显示,那找起来就会很明显体验会好很多,本文就来介绍一下vue搜索高亮popsearch组件的实现示例,感兴趣的可以了解一下
    2023-09-09
  • Vue+node实现音频录制播放功能

    Vue+node实现音频录制播放功能

    这篇文章主要介绍了Vue+node实现音频录制播放,功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-03-03
  • element 实现导航栏收起展开功能及思路

    element 实现导航栏收起展开功能及思路

    这篇文章主要介绍了element 实现导航栏收起展开功能,实现思路先给 el-menu加上 :collapse="isCollapse" 属性,这个属性也是 element 上的一个参数,意思为是否开启折叠动画,在 data 中定义 isCollapse ,用 true 和 false 控制展开与收起,需要的朋友可以参考下
    2023-01-01

最新评论