0.2.8 • Published 2 years ago
@tawa/mario-list-content v0.2.8
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 | - |