首页IT科技antd表格滚动(Ant Design Pro(5)-7.高级表格ProTable)

antd表格滚动(Ant Design Pro(5)-7.高级表格ProTable)

时间2025-07-07 15:28:19分类IT科技浏览5615
导读:Ant Design Pro 高级表格ProTable的使用 一. 简介...

Ant Design Pro 高级表格ProTable的使用

一. 简介

1. 什么是ProTable?

ProTable 的诞生是为了解决项目中需要写很多 table 的样板代码的问题,所以在其中做了封装了很多常用的逻辑。这些封装可以简单的分类为预设行为与预设逻辑。

依托于 ProForm 的能力,ProForm 拥有多种形态,可以切换查询表单类型,设置变形成为一个简单的 Form 表单,执行新建等功能。

2. 何时使用ProTable?

当你的表格需要与服务端进行交互或者需要多种单元格样式时,ProTable 是不二选择。

二. 使用

1. ProTable属性及使用 request的使用

request 是 ProTable 最重要的 API,request 会接收一个对象。对象中必须要有 data 和

success,如果需要手动分页 total 也是必需的。request 会接管 loading 的设置,同时在查询表单查询和 params 参数发生修改时重新执行。同时 查询表单的值和 params 参数也会带入。以下是一个例子: <ProTable<DataType, Params> // params 是需要自带的参数 // 这个参数优先级更高,会覆盖查询表单的参数 params={params} request={async ( // 第一个参数 params 查询表单和 params 参数的结合 // 第一个参数中一定会有 pageSize 和 current ,这两个参数是 antd 的规范 params: T & { pageSize: number; current: number; }, sort, filter, ) => { // 这里需要返回一个 Promise,在返回之前你可以进行数据转化 // 如果需要转化参数可以在这里进行修改 const msg = await myQuery({ page: params.current, pageSize: params.pageSize, }); return { data: msg.result, // success 请返回 true, // 不然 table 会停止解析数据,即使有数据 success: boolean, // 不传会使用 data 的长度,如果是分页一定要传 total: number, }; }} /> dataSource

Table 的数据,protable 推荐使用 request 来加载,类型是一个数组T【】

<ProTable<API.CreateClusterParams> columns={columns} // dataSource会将 dataSource={list} request={async (params = {}, sort, filter) => { // 这里是我自定义的一个带参数的方法 handleClick(params); return { dataSource:data } }} pagination={{ defaultPageSize: 10, showSizeChanger: true, }} > </ProTable>

其它属性使用请参考官方文档:ProTable属性及使用

2. ActionRef 手动触发

有时我们要手动触发 table 的 reload 等操作,可以使用 actionRef,可编辑表格也提供了一些操作来帮助我们更快的实现需求。

interface ActionType { reload: (resetPageIndex?: boolean) => void; reloadAndRest: () => void; reset: () => void; clearSelected?: () => void; startEditable: (rowKey: Key) => boolean; cancelEditable: (rowKey: Key) => boolean; } const ref = useRef<ActionType>(); <ProTable actionRef={ref} />; // 刷新 ref.current.reload(); // 刷新并清空,页码也会重置,不包括表单 ref.current.reloadAndRest(); // 重置到默认值,包括表单 ref.current.reset(); // 清空选中项 ref.current.clearSelected(); // 开始编辑 ref.current.startEditable(rowKey); // 结束编辑 ref.current.cancelEditable(rowKey); 3. Columns 列定义

详情请参考官方文档:Columns 列定义

具体如何使用可以参考后面我写的完整的页面 import { ModalForm, ProColumns, ProFormText, ProFormTextArea, ProTable } from @ant-design/pro-components; import { useEffect, useState } from react; import { Button, message, Space } from antd; import AddCluster from "@/pages/System/ClusterManagement/components/AddCluster"; import { pageQueryCluster } from "@/services/ant-design-pro/test"; import { request } from @umijs/max; const columns: ProColumns<API.CreateClusterParams>[] = [ { title: ID, dataIndex: id, }, { title: 名称, dataIndex: name, }, { title: 操作, key: option, width: 120, valueType: option, render: (_, row) => [ <Space> <ModalForm title="编辑" trigger={<Button type="primary">编辑</Button>} // form={row} autoFocusFirstInput modalProps={{ destroyOnClose: true, onCancel: () => console.log(run), }} submitTimeout={2000} onFinish={async (values) => { console.log(values.name); return true; }} > <ProFormText width="md" name="id" label="ID" placeholder="请输入id" initialValue={row.id} /> <ProFormText width="md" name="name" label="名称" placeholder="请输入名称" initialValue={row.name} /> <Button type="primary"> 测试配置连接 </Button> </ModalForm> </Space>, <Space> <ModalForm title="确定要删除吗?" trigger={<Button type="primary" danger>删除</Button>} // form={row} autoFocusFirstInput modalProps={{ destroyOnClose: true, onCancel: () => console.log(run), }} submitTimeout={2000} onFinish={async (row) => { message.success(提交成功); return true; }} > </ModalForm> </Space>, ], }, ] // 在数据为返回前显示这里的数据 const data = [ { id: 1, name: 测试集群1, }, { id: 2, name: 测试集群2, }, ]; const pageParams = { pageSize: 10, pageNumber: 1 }; export default () => { const [list, setData] = useState(data); const handleClick = async (props: any) => { const respone = await pageQueryCluster(props) console.log("获取后台数据", respone) if (respone.code = 200) { setData(respone.data.items); } else { setData(data); } console.log(respone) } useEffect(() => { handleClick(pageParams); }, []) return ( <div className=proTable> <AddCluster /> <ProTable<API.CreateClusterParams> columns={columns} dataSource={list} request={async (params = {}, sort, filter) => { handleClick(params); return { dataSource: data } }} pagination={{ defaultPageSize: 10, showSizeChanger: true, }} > </ProTable> </div> ); }; 4. 批量操作

与 antd 相同,批量操作需要设置 rowSelection 来开启,与 antd 不同的是,pro-table 提供了一个 alert用于承载一些信息。你可以通过 tableAlertRender和 tableAlertOptionRender来对它进行自定义。设置或者返回 false 即可关闭。

属性 描述 类型 默认值 alwaysShowAlert 总是展示 alert,默认无选择不展示(rowSelection内置属性) boolean - tableAlertRender 自定义批量操作工具栏左侧信息区域, false 时不显示 ({ selectedRowKeys: Key[], selectedRows: T[], onCleanSelected: ()=>void }) => ReactNode)/false - tableAlertOptionRender 自定义批量操作工具栏右侧选项区域, false 时不显示 ({ selectedRowKeys: Key[], selectedRows: T[], onCleanSelected: ()=>void }) => ReactNode)/false

具体使用参考如下链接:table表格批量操作

5. 搜索表单

ProTable 会根据列来生成一个 Form,用于筛选列表数据,最后的值会根据通过 request 的第一个参数返回,看起来就像。

搜索表单有两种类型:

一种是带搜索框的,组件默认开启,也可手动开启。 search={{ labelWidth: auto, }}

页面效果如下:

一种是轻量筛选替换查询,开启方式如下: search={{ filterType: light, }}

页面效果如下:

如果组件自带的搜索功能不满足我们的需求,我们也可以自定义搜索表单,具体如何使用请参考如下链接:搜索表单自定义

其他更多细节和详情参考:ProComponents官网

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
王者荣耀中太乙真人怎么出装最强(王者荣耀中太乙真人怎么出装?) 指针相关知识(指针知识点总结)