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