ProTab（高级表格）的使用
一、 params 和 request 属性的使用
例子如下：
import React, { useState } from 'react'; import { ProTable } from '@ant-design/pro-table'; const columns = [ { title: '姓名', dataIndex: 'name', }, { title: '年龄', dataIndex: 'age', sorter: true, }, { title: '地址', dataIndex: 'address', }, ]; const DemoTable = () => { const [params, setParams] = useState({ current: 1, pageSize: 20 }); const fetchData = async (params) => { const { current, pageSize, sorter } = params; const response = await fetch(`/api/data?current=${current}&pageSize=${pageSize}&sorter=${sorter}`); const data = await response.json(); return { data: data.list, total: data.total, success: true, }; }; return ( <ProTable request={fetchData} params={params} onParamsChange={setParams} columns={columns} /> ); };
在这个示例中，定义了一个表格组件DemoTable，其中包含了一个ProTable组件。ProTable组件的request属性和params属性分别指定了数据请求的回调函数和请求参数，用于向服务端获取表格数据。onParamsChange属性则指定了params状态的更新函数，用于在用户翻页或者修改每页展示数量时，更新请求参数并重新渲染表格。
在fetchData函数中，使用params对象中的属性来构造请求参数，并通过fetch函数向服务端发送请求。服务端返回的数据包括了表格数据和总条数等信息。在函数返回时，需要将数据结构转换为ProTable组件所需的格式，即包含了data、total和success三个属性的对象。
二、ProTable 的练习
import React, { useState, useRef } from 'react'; import ProTable from '@ant-design/pro-table'; import { ProForm, ProFormText } from '@ant-design/pro-form'; import './index.less'; import { getConfigList } from '@/services/@xzfy/config'; import { Drawer, Button, message } from 'antd'; import { PlusCircleOutlined } from '@ant-design/icons'; import { WaterMark } from '@ant-design/pro-layout'; import { tableColums } from './tableColumns'; import AddOrEdit from '../SystemManagement/dictManagement/addOrEdit'; export default function index() { // 获取表单元素 const form = useRef(); // 控制抽屉的开关 const [open, setOpen] = useState(false); // const [currRecord,setCurrRecord] = useState(null); // 定义抽屉标题 const [title, setTitle] = useState(); // 点击“ 编辑 ”按钮获取该行的数据 const [currentRow, setCurrentRow] = useState(); // 定义表格列 const columns = [ ...tableColums, { title: '操作', valueType: 'option', align: 'center', width: 100, render: (_, record) => { return [ <a key="edit" onClick={() => { console.log(record); setCurrentRow(record); setTitle('编辑'); setOpen(true); }} > 编辑 </a>, ]; }, }, ]; // 点击“ 新增 ” 按钮后 const add = () => { setTitle('新增'); // setCurrRecord() setOpen(true); }; // 关闭抽屉 const drawerClose = () => { setOpen(false); setCurrentRow(null); }; // 表单重置 const FormReset = () => { // 不能用这个的方式原因是CurrentRow被设置成表单的初始值，第一次点击重置的时候，会后退到初始化值的状态，然后第二次点击的时候才可以把初始值变为undefined // setCurrentRow(undefined); form.current.setFieldsValue({ configKey: '', configValue: '', configDesc: '', }); }; // 表单提交 const FormFinish = () => { if (title == '编辑') { message.success('编辑成功！'); setOpen(false); } else if (title == '新增') { message.success('新增成功！'); setOpen(false); } }; return ( <div className="tabBox"> <WaterMark content="大美女"> <ProTable // options={false} // 用于配置表格的一些基本选项。这个属性可以设置为一个对象，包含多个选项，用于控制表格的分页、密度、搜索、导出等功能。 rowKey="id" request={getConfigList} // 需要获取数据时，会调用"request"属性所指定的函数，并将当前的查询参数、排序规则、过滤条件等信息作为参数传递给这个函数。这个函数需要返回一个Promise对象，表示异步操作的结果。当ProTable组件获取到异步操作的结果后，会自动更新表格的数据源，并重新渲染表格。 columns={columns} // 定义表格的列信息。 cardBordered={false} // 在表格外部添加一个带边框的卡片容器 pagination={{ pageSize: 5 }} // 用于配置分页功能的相关参数，包括当前页码、每页显示的数据条数、总数据条数等 toolBarRender={() => ( <Button type="primary" shape="round" icon={<PlusCircleOutlined />} onClick={add}> 新增 </Button> )} // 用于自定义表格工具栏的渲染内容。这个属性接受一个函数作为参数，用于渲染工具栏的内容。 /> {open?<AddOrEdit visible={open} record={ currRecord} />:''} <Drawer destroyOnClose // 用于控制弹窗是否在关闭时销毁组件实例。 title={title} placement="right" onClose={drawerClose} open={open} > <ProForm initialValues={currentRow} formRef={form} onReset={FormReset} onFinish={FormFinish} > <ProFormText width="md" name="configKey" label="配置键" placeholder="请输入配置键" rules={[{ required: true }]} // 必填项 /> <ProFormText width="md" name="configValue" label="配置值" placeholder="请输入配置值" rules={[{ required: true }]} /> <ProFormText width="md" name="configDesc" label="配置描述" placeholder="请输入配置描述" rules={[{ required: true }]} /> </ProForm> </Drawer> </WaterMark> </div> ); }
运行结果：
三、表格的数据换行
示例图：
分析：
利用 render 属性来实现换行的效果
代码如下：
const data = [ { id: 1, isSigning: '签约状态1',stateYw:0, belongingArea: '区域1', orgName: '机构1' }, { id: 2, isSigning: '签约状态2',stateYw:1, belongingArea: '区域2', orgName: '机构2' }, { id: 3, isSigning: '签约状态3',stateYw:0, belongingArea: '区域3', orgName: '机构3' }, { id: 4, isSigning: '签约状态4',stateYw:1, belongingArea: '区域4', orgName: '机构4' }, { id: 5, isSigning: '签约状态5',stateYw:0, belongingArea: '区域5', orgName: '机构5' }, ];
// 定义状态的代表值 const StateYwMap = { 0:'未办理', 1:'办理中', 2:'办理完成' } export const tableColums = [ { title: '基本信息', // hideInTable:true, // 此行不在表格里显示 search: false, render:(text,record,index)=>{ return ( <div> <div>机构名称：{record.orgName}</div> <div> 业务状态：{ StateYwMap[record.stateYw] } </div> <div> 签约状态：{ record.isSigning } </div> </div> ) } } ]
四、封装proTable
