对于一些后台管理系统，典型的列表页包括筛选表单项、Table表格、Pagination分页这三部分。,针对使用 Antd 的系统，在 ahooks 中主要是通过 useAntdTable 和 usePagination 这两个 hook 来封装。,usePagination 基于 useRequest 实现，封装了常见的分页逻辑。,首先通过 useRequest 处理请求，service 约定返回的数据结构为 { total: number, list: Item[] }。,其中 useRequest 的 defaultParams 参数第一个参数为 { current: number, pageSize: number }。并根据请求的参数以及返回的 total 值，得出总的页数。,还有 refreshDeps 变化，会重置 current 到第一页「changeCurrent(1)」，并重新发起请求，一般你可以把 pagination 依赖的条件放这里。,重点看下 onChange 方法：,最后返回请求的结果以及 pagination 字段，包含所有分页信息。另外还有操作分页的函数。,小结：usePagination 默认用法与 useRequest 一致，但内部封装了分页请求相关的逻辑。返回的结果多返回一个 pagination 参数，包含所有分页信息，及操作分页的函数。,缺点就是对 API 请求参数有所限制，比如入参结构必须为 { current: number, pageSize: number }，返回结果为 { total: number, list: Item[] }。,useAntdTable 基于 useRequest 实现，封装了常用的 Ant Design Form 与 Ant Design Table 联动逻辑，并且同时支持 antd v3 和 v4。,首先调用 usePagination 处理分页的逻辑。,然后处理列表页筛选 Form 表单的逻辑，这里支持 Antd v3 和 Antd v4 版本。,获取当前表单值，form.getFieldsValue 或者 form.getFieldInstance：,校验表单逻辑 form.validateFields:,重置表单 form.setFieldsValue：,修改表单类型，支持 'simple' 和 'advance'。初始化的表单数据可以填写 simple 和 advance 全量的表单数据，开发者可以根据当前激活的类型来设置表单数据。修改 type 的时候会重置 form 表单数据。,_submit 方法：对 form 表单校验后，根据当前 form 表单数据、分页等筛选条件进行对表格数据搜索。,另外当表格触发 onChange 方法的时候，也会进行请求：,初始化的时候，会根据当前是否有缓存的数据，有则根据缓存的数据执行请求逻辑。否则，通过 manual 和 ready 判断是否需要进行重置表单后执行请求逻辑。,最后，将请求返回的数据通过 dataSource、 pagination、loading 透传回给到 Table 组件，实现 Table 的数据以及状态的展示。以及将对 Form 表单的一些操作方法暴露给开发者。,
© 版权声明
文章版权归作者所有，未经允许请勿转载。
">