@tawa/mario-list-content NPM

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>	-