如何解決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

看了源碼后又嘗試監(jiān)聽表格滾動使用`this.$refs.table.handleClose()`關(guān)閉popper，但都未達(dá)到我想要的效果。

嘗試了網(wǎng)上一些解決方案，跟我之前的嘗試一樣，只有拖動滾動條停止的時候popper消失，滑動鼠標(biāo)滾輪則無效。無奈我只好直接修改源碼的visible來關(guān)閉popper，

解決方法如下：

解決方法

1、先把element-ui下select.vue的源碼單獨拎出來

添加自己的代碼（另外還需修改導(dǎo)入路徑）形成組件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源碼的基礎(chǔ)上接收父組件傳來的scrollTop，監(jiān)聽scrollTop的改變使visible為false。

props: {
    // 源碼上新增：父組件表格滾動條
    scrollTop: {
      type: Number,
      default: 0,
    },
  },
  
  watch: {
    //  源碼上新增：滾動條滾動就隱藏下拉框
    scrollTop() {
      this.visible = false;
    },
  }

2、把el-select改成Select組件

監(jiān)聽滾動條的滾動，滾動就隱藏下拉框

主要代碼如下：

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

components: { Select },
data() {
    return {
      tempTableBody: null,
      // 滾動條位置，用來判斷滾動條滾動隱藏下拉框
      scrollTop: 0,
    };
  },
  
  mounted() {
    this.onscroll();
  },
  methods: {
    // 監(jiān)聽table的bodyWrapper的滾動
    onscroll() {
      this.$nextTick(() => {
        this.tempTableBody= this.$refs.editTempTable.bodyWrapper;
        if (this.tempTableBody) {
          this.tempTableBody.addEventListener('scroll', this.handleScroll, false);
        }
      });
    },
    // 滾動條出現(xiàn)滾動就改變scrollTop的值
    handleScroll() {
      this.scrollTop = this.tempTableBody.scrollTop;
      // this.$refs.matchField.handleClose();
    },
  }