elementui popover 下嵌套select 的问题解决_vue表头筛选el-popover嵌套a-select下拉框有问题

前言： 这个问题的现象产生于这样

当我点击下拉框的时候，由于select框 在elementui 默认是在app外的 ，如图。

导致我们的popover组件不能监听到他其实逻辑上是属于我们的app里头的。如果你的问题是类似的，那么可以参考一下我的解决方法。

最终效果

最终效果是当你的悬浮框存在的时候，移动到任何地方都不会隐藏这个容器。

解决

设置一个@visible-change的函数。

// 台风的下拉框出现、隐藏时触发的函数
    selectVisibleChange: function (e) {
      this.selectShow = e;
    },
1
2
3
4

这个selectShow变量 用于标识、 我们当前的 下拉框是否在显示。
如果他在显示 ，那么：

popover 的hide events 触发 让我们的visible 为true

// popover 隐藏前的回调函数
    popHideCallBack: function(){
      if(this.selectShow){
        this.visible = true;
      }
    },
1
2
3
4
5
6

总结

监听popover的隐藏，当他想要隐藏的时候 查看我们的下拉框是否正在被显示，如果是，那么我们在hover其他的任何地方都不要关闭，一直让visible为true，直到它为false。