ahooks-pagination v2.0.0

ahooks-pagination

使用

$ yarn add ahooks-pagination  || npm i ahooks-pagination --save

在父组件中调用

// 1.引入包
import AhooksPagination from "ahooks-pagination"

const paginationRef = useRef({})

// 2.手动执行 （分页器 current， pageSize 值重置）

useEffect(() => {
    if (formState !== undefined) {
      paginationRef.current.search();
    }
}, [formState]);

// 调用search后，分页器自动调用： runGetDataList

// ------------------------------------------
// 分页器search方法
useImperativeHandle(ref, () => ({
    // search 就是暴露给父组件的方法
    search: () => {
        run({
            current: 1,
            pageSize: params[0]?.pageSize || (props.defaultPageSize || 10)                          ,
            searchVal: props.params
        });
    }
}));

// ------------------------------------------


<AhooksPagination
    runGetDataList={runGetTableData}
    ref={paginationRef}
    params={formState}
    styleOpt={{ textAlign: 'right', marginTop: 20 }}
    showQuickJumper={true}
    showSizeChanger={true}
    defaultPageSize={10}
/>