title: ListContent 列表查询页 nav: title: 组件 path: /components order: 1 group: title: ' ' order: 125

ListContent 列表查询页

列表查询页。表单和表格数据联动。

使用

import ListContent from '@monsterooo/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 | 表单属性，同@monsterooo/form | object | - | | tableProps | 表格属性，同@monsterooo/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 | - |

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