useAntdTable

[brickspert]

集成了常见的 包含 精简搜索，复杂搜索，分页 等的 列表页。

功能

1. 包含分页能力的表格数据展示；
2. 搜索表单与表格联动；
3. 支持简单、复杂 2 种参数独立的搜索模式切换，并且能自动载入上一次表单填充数据（需要配置 id）；
4. 跳出当前页后返回时自动还原上一次的表单状态，并刷新之前的页码数据（需要配置 id）；

用法

userAntdTable({ service: Function, form?: Antd.WrappedFormUtils, id?: string })

例子

const {
  table: { data, loading, changeTable, },
  form: { search, searchType, changeSearchType}
} = useTable({ form, service: getMyApp });

<Form onSubmit={search}>
</Form>

<Table
  loading={loading}
  onChange={changeTable}
  dataSource={data.list}
/>

参数说明

参数名	必填	类型	说明
service	是	Promise	请求表格数据的 service 方法
form	否	Antd.WrappedFormUtils	搜索 From，为空时 useTable 的 search 方法也不存在
id	否	string	缓存 id，为空时不会缓存数据

约定

• 分页参数名：current
• useTable 调用 service 时，会把分页参数（current）和搜索表单的查询参数合并

返回值

参数名	类型	说明
table.data	Object	调用 service 时服务端返回的数据，主要用于渲染表格数据
table.loading	boolean	是否正在加载中，用于给 table 增加 loading 状态
table.changeTable	Function	表格翻页处理函数，用于设置 table.onChange，传入 focusUpdate 可以使用当前搜索条件强制刷新数据
form.searchType	string	搜索类型，可选值 simple、advance，用于切换搜索表单
form.changeSearchType	Function	搜索类型切换处理函数
form.search	Function	表单搜索处理函数，用于设置 form.submit，与 changeTable 的差异是会重置分页状态

[brickspert]

建议 changeTable 不仅仅代理 current， 在我们的业务场景中还需要 pageSize，filters，sorter。
希望可以补全。

[brickspert]

focusUpdate 不是很理解， Table 的 onChange 没有这个属性，我们需要代理一下吗？

[brickspert]

为了保持一致，建议用法变为

const {
...
} = useTable( service, deps[] , options: { form，id});

• service 是 Promise 的异步函数
• deps 是可选的依赖数组，如果变化后，分页重置为 1，重新执行 service。可以兼容不需要表单的超级简单的搜索，比如仅仅有一个 select。
• options 是可选的

[tudou527]

focusUpdate 不是很理解， Table 的 onChange 没有这个属性，我们需要代理一下吗？

原来是为了解决当前分页的操作问题加的。比如 table 中有一列是 switch，状态改变后需要刷新当前页码的数据，但这种情况下 current、pageSize 都没变。用 deps 实现还不如暴露 table.reload 方法给用户来的直接

[tudou527]

pageSize，filters，sorter

pageSize 加了，但 filter、sorter 项目中暂时没用到，留作以后的 feature 吧（主要原因是现在还没空写 demo 测些业务中暂时用不到的这些功能）

[tudou527]

为了保持一致，建议用法变为

const {
...
} = useTable( service, deps[] , options: { form，id});

• service 是 Promise 的异步函数
• deps 是可选的依赖数组，如果变化后，分页重置为 1，重新执行 service。可以兼容不需要表单的超级简单的搜索，比如仅仅有一个 select。
• options 是可选的

form，id 改成了必填