antd vue 解决a-select下拉菜单跟随页面滚动

遇到的坑当然要分享啦

官方原话：getPopupContainer菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。

场景1

• 下拉菜单跟随滚动走动了，因为默认的是:getPopupContainer="() => document.body"
  

  image.png

• 解决方案:getPopupContainer="triggerNode => triggerNode.parentNode"
  

  image.png

场景2

• 当表格里出现select时,就会出现以下情况

  
  
  image.png

• 解决方案手动指定到对应节点上

给父级定义个 id="tableBox" 属性

// select 属性上绑定
:getPopupContainer="() => getPopupContainerEl"

// data 里定义
data() {
    return {
        getPopupContainerEl: document.body   // 先给个默认值
    }
}

// mounted 里重新赋值
  mounted() {
    this.$nextTick(() => {
  // 这一步重新赋值的原因是，因为没有获取dom，等页面渲染完在获取
      this.getPopupContainerEl = document.getElementById('tableBox')
    })

  },

image.png

这样就完美解决了....