title: ListContent 列表查询页
nav:
title: 组件
path: /components
order: 1
group:
title: ' '
path: /list-content
order: 125
ListContent 列表查询页
列表查询页。表单和表格数据联动。
使用
import ListContent from '@tawa/mario-list-content';
<ListContent />;
代码演示
基本用法
如何使用 ListContent 的 action 方法
const actionRef = (React.useRef < TableQueryActions) | (null > null);
// onQuery 查询页面，重置分页参数，带上form参数
// onReset 查询页面，先调用form.resetFields，再带上form参数
// onLoad 查询页面，带上form参数。相当于本页刷新，不重置分页参数
const { onQuery, onReset, onLoad } = actionRef;
<ListContent ref={actionRef} />;切记不要直接调用 fetchData 方法，应该使用上面三个语义化的方法执行查询。
API
| 参数 |
说明 |
类型 |
默认值 |
| formProps |
表单属性，同@tawa/mario-form
|
object |
- |
| tableProps |
表格属性，同@tawa/mario-table
|
object |
- |
| fetchData |
请求数据方法 ,params 包含表单数据(如果有)、分页参数 |
(params) => Promise |
- |
| pageSizeKey |
设置 fetchData params 中返回的分页大小 key |
string |
pageSize |
| currentKey |
设置 fetchData params 中返回的当前页面 key |
string |
current |
| autoQuery |
是否进页面查询一次 |
boolean |
true |
| action |
用于渲染查询按钮，内置了一组查询按钮，传此参数会覆盖默认行为 |
ReactNode |
- |
| toolbar |
用于渲染操作栏 |
ReactNode |
- |
| toolbarPosition |
操作拦内容渲染位置 |
left|right
|
left |
| allowInputIgnoreEmpty |
允许 input 输入框将空字符串转换成undefined，配置此属性后将强制给 fields 的 props 属性(当 props 为函数时需自行处理)追加ignoreEmptyString: true。 |
boolean |
false |
| cachedQuery |
缓存搜索参数 |
false | CachedQuery
|
false |
| showCollapse |
是否开启展开收起功能 |
- |
false |
| collapseProps |
受控的展开收起功能，配置展开收起初始化状态，并监听状态发生变化时回调 |
CollapseProps |
- |
| lang |
语言类型 |
'enUS' | 'zhCN' | 'zhTW'
|
'enUS' |
CachedQuery
| 参数 |
说明 |
类型 |
默认值 |
| externalPaths |
额外路径，配置后从该路径返回也会缓存查询条件 |
string[] |
- |
| onReady |
从二级页面返回后页面 ready 钩子 |
(params: Record<string, any>, extraCache: Record<string, any>) => void |
- |
| extraCache |
额外需要保存的参数（比如页面勾选数据，动态数据需要使用函数，且键值需要 ref.currrent 传递） |
Record<string, any> | () => Record<string, any> |
- |
CollapseProps
| 参数 |
说明 |
类型 |
默认值 |
| collapsed |
指定当前展开状态 |
boolean |
- |
| onCollapse |
展开状态发生变化时回调 |
(collapsed:boolean)=>void |
- |
