我要评论问题场景
如下：
尝试了好几种解决方法，比如从下拉框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();
},
}
总结
至此，就成功解决这个问题了。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论