elementui 下拉框出现脱离 超出弹框解决方案_element-ui 下拉组件弹窗位置分离问题解决

出现原因 :

父盒子弹框因为内容过多只能设置隐藏滚动的效果,但是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)
        })
        
   }



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
31
32
33
34
35
36
37
38
39
40

然后就完美解决了问题！