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

最新推荐文章于 2023-07-26 15:01:12 发布

j-ymg

最新推荐文章于 2023-07-26 15:01:12 发布

阅读量5k

点赞数

分类专栏： vue element-ui 文章标签： vue elementui

本文链接：https://blog.csdn.net/weixin_45185103/article/details/121512999

版权

问题场景如下：
在这里插入图片描述

尝试了好几种解决方法，比如从下拉框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