优化Ant Design 下拉框伴页面滚动

在项目中使用antd的form组件，当一屏显示不完存在滚动条时，滑动滚动条会出现form中的下拉框伴随页面滚动的情况。通过重新绑定下拉框对应的父级定位元素，可优化这样的现象。

一、封装通用方法

export const scrollSelectFormUtils = (id: string) => { //获取当前元素 const getPopupContainer: RenderDOMFunc = () => { return document.getElementById(id) as HTMLElement } //定位当前元素 const scrollSelectFormProps: { id: string style: { // declare position css type position: | 'inherit' | 'initial' | 'revert' | 'unset' | '-webkit-sticky' | 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky' | undefined } } = { id, style: { position: 'relative', }, } return { getPopupContainer, scrollSelectFormProps, } }

二、页面引入使用

import { scrollSelectFormUtils } from '****' //引入 //获取定义 const { getPopupContainer, scrollSelectFormProps } = scrollSelectFormUtils( 'abnormal-list' ) //绑定form <Form layout='inline' form={form} {...scrollSelectFormProps}> //绑定select <Select getPopupContainer={getPopupContainer}> </Select> </Form> 

 

showtooltip