優化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