解决element-ui中select下拉框popper超出弹框问题_select弹出框在el-dialog中滚动跑出弹框了

问题场景如下：

尝试了好几种解决方法，比如从下拉框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';
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

props: {
    // 源码上新增：父组件表格滚动条
    scrollTop: {
      type: Number,
      default: 0,
    },
  },
  
  watch: {
    //  源码上新增：滚动条滚动就隐藏下拉框
    scrollTop() {
      this.visible = false;
    },
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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();
    },
  }    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

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