Antd中使用Select框在点出弹出下拉列表后鼠标移到外面滚动会导致下拉框位置偏移

最新推荐文章于 2024-08-23 11:15:19 发布

孜然卷k

最新推荐文章于 2024-08-23 11:15:19 发布

阅读量811

点赞数 7

文章标签：前端 javascript react.js anti-design-vue

本文链接：https://blog.csdn.net/m_e_i/article/details/135969965

版权

本文讲述了在使用AntdSelect组件时遇到的滚动导致下拉列表偏移的问题，通过设置getPopupContainer属性并将其值设为触发器的父元素，解决了这个问题。作者提供了修改后的代码片段以供参考。

摘要由CSDN通过智能技术生成

今天使用Select框的时候由于页面可以滚动出现了在点出弹出下拉列表后鼠标移到外面滚动会导致下拉框位置偏移的bug

如图上下滚动外部页面会导致下拉框偏移

解决方案：

Antd 官方文档

文档中Select框有一个元素 getPopupContainer

并且有一行小字提示

注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用 getPopupContainer={triggerNode => triggerNode.parentElement} 将下拉弹层渲染节点固定在触发器的父元素中。

在原有代码中加入

getPopupContainer={triggerNode => triggerNode.parentElement}

完整代码

<Form.Item label="病历标准">
  {getFieldDecorator('characteristicJG', {
  })
    (<Select style={{ width: '100%' }}
      onChange={this.characteristicChangeJG}
      mode="multiple"
      placeholder="请选择病历标准"
      getPopupContainer={(triggerNode:any)=>{
        return triggerNode.parentElement 
      }}
    >
      {characteristic_JG_list.map((item: any, index: any) => {
        return <Option key={item} value={item}>{item}</Option>
      })}
    </Select>)
  }