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

问题场景如下：

文章图片

尝试了好几种解决方法，比如从下拉框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|解决element-ui中select下拉框popper超出弹框问题】至此，就成功解决这个问题了。