出现原因 :
父盒子弹框因为内容过多只能设置隐藏滚动的效果,但是elementui 下拉框的z-index权重最高,会出现脱离或者超出弹框的现象.
如果调低权重,则会出现节点被弹框覆盖的情况
解决方案
经过观察,elementui 下拉框只有在聚焦的时候才会出现,所以我门只需要在弹框内容出现滚动的时候,关闭聚焦即可实现此种问题,但是因为是在滚动监听下操作,所以最好加上节流函数提升页面性能
<el-select class=input-size ref="multiSelect1" v-model="form.installationStatus" placeholder="请选择状态"
clearable>
<el-option v-for="item in installationStatusType" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
-----------------------------------------------------------------------------------------
data() {
return {
// 节流开关
timer: 0
}
}
----------------------------------------------------------------------------------------
mounted(){
// 添加滚动事件监听
获取父盒子DOM.addEventListener('scroll', () => {
// 设置节流函数,提升性能
if (this.timer !== 0) { // timer不等于0,就是说明上一个定时器还没有执行完毕
return;
}
this.timer = setTimeout(() => {
// 去除聚集效果
this.$refs.multiSelect.blur();
// 执行完毕,一定将timer设置 0 , 支持下一次的执行
this.timer = 0
}, 20)
})
}
然后就完美解决了问题!