elementUI如何让所有select失焦

Question

由于elementUI的select、dialog等弹出框z-index都是叠加，造成banner的显示有点瑕疵

比如下拉框滚动超过banner时：

如果设置banner的z-index最大值，一旦出现遮罩层就会露出顶部：

想到一种方法，只要滚动的时候让select失焦就可以隐藏下拉框
求大佬们的解决方法(｡◕ ∀ ◕｡)

Answer 1

可以设置不同的z-index值 啊

Answer 2

监听滚动事件，滚动的时候收掉弹出框。

Answer 3

层级设置 或者点击select外 任意地方 关闭select

Answer 4

/**
 * 源码中找了个遍，没发现有什么现有的属性或方法可用，以下是比较扯淡的解决方案.....虽然有点扯，但是可以完美解决问题
 * 动态修改headbar的z-index,取文档中所有poppers中最大的zindex + 1
 * page-wrapper 绑定点击的事件的区域容器，如果可以，可以是document
 */

const wrapper = document.getElementById('page-wrapper')
wrapper.addEventListener('click', () => {
  setTimeout(() => {
    const poppers = document.getElementsByClassName('el-popper')
    const zIndexs = []
    for (let i = 0; i < poppers.length; i++) {
      zIndexs.push(poppers[i].style.zIndex)
    }
    this.zIndex = Math.max.apply(null, zIndexs) + 1
  }, 30)
}, true)

Answer 5

你好，这个问题，怎么解决的，能帮忙分享一哈吗