前言

ProComponent与antd之间的关系

ProComponent 是由 Ant Design Pro 团队开发的一个基于 Ant Design 的高级组件库，用于构建企业级后台管理系统。它提供了一系列功能丰富且易于使用的组件，帮助开发者快速搭建现代化的管理系统界面。

antd（Ant Design）是一个流行的React UI组件库，它提供了一套美观、高质量且易于使用的UI组件，用于构建Web应用程序的前端界面。Ant Design 是一个开源项目，由阿里巴巴前端团队开发和维护。

ProComponent 是 Ant Design Pro 团队在 Ant Design 的基础上进一步封装和扩展的组件库。它在 Ant Design 的基础上，提供了更多面向企业级后台管理系统的特定组件和功能，以及更多与业务开发相关的工具和模板。

因此，ProComponent 和 antd 是有关系的，可以说 ProComponent 是基于 antd 构建的，并提供了更加专注于企业级后台管理系统的组件和功能。使用 ProComponent 可以快速构建功能强大、美观且易于使用的企业级后台管理系统界面。

😊 学习之前输入我的学习心得：多看官方文档和例子

ProComponent使用总结

TODO: 待补全

我们对ProComponent官网的分析，整个文档风格为总体概述和分别阐述。首先进行架构设计的阐述，接下来分四个方面来介绍：布局、数据的输入、数据的展示、一些通用的组件。

整体分析.png

针对这四个大方面，我列举出开发中常用的几个组件

布局中的ProLayout、ProCard
数据的输入：ProForm、ProFormList、ProFormDependency、Modal/Drawer、Query/LightFilter与ProFormFields表单项的结合使用
数据的展示： ProTable、ProDescriptions自定义展示

布局

ProLayout

ProCard

数据的输入

ProForm

ProFormList

ProFormDependency

Modal/Drawer

Query/LightFilter

ProFormFields表单项

数据的展示

ProTable

😊 真的超级好用

使用ProTable最基础的要有数据源和配置列对应的是dataSource和columns。也可以没有dataSource属性，使用request远程调用接口获取数据源。

想要高级筛选栏，是通过search属性控制的,设置search:false 则隐藏高级筛选栏。高级筛选栏中的搜索项是和columns中配置的列相对应的，如果不想让columns中的某一项作为搜索项，需要在columns列项中设置search:false。

import { ProTable } from '@ant-design/pro-components';

const tableRef = useRef();
 <ProTable
     actionRef={tableRef}  
          search={false}  //这里控制高级筛选栏是否展示 
          columns={columns}
          request={async (params) => {
            return api.business
              .queryBusinessRecordList({
                receiveCorpId: corpId,
                pageNo: params?.current || 1,
                pageSize: params?.pageSize || 10
              })
              .then((res: any) => {
                if (res.success) {
                  return {
                    data: res?.module?.rows,
                    success: true,
                    total: res?.module?.total
                  };
                } else {
                  return {
                    data: [],
                    success: false,
                    total: 0
                  };
                }
              })
              .catch((err) => {
                console.log(err, 'err');
                return {
                  data: [],
                  success: false,
                  total: 0
                };
              });
          }}
          pagination={{
            pageSize: 10,
            showQuickJumper: false
          }}
          scroll={{ x: 'max-content' }}
          rowKey={(record) => record.id}
          options={{ fullScreen: true, setting: false, density: false, reload: false }}
        />

常用的属性如下

columns

和antd的使用一样配置table的列 valueEnum：可以根据dataIndex的值，展示对应的label值 search:type这个字段生成一个搜索项 render:自定义这个列要渲染的内容， record为返回的这一行的数据 valueType:属性，可以直接把这列的这个数据进行一些格式化，如果是时间类型转为只展示年月日可以设置 valueType: 'date' 只设置为时分秒 valueType: 'time' 作为时间类型的转换非常好用 fixed:固定这一列的内容，fixed表示固定在右边，中间的内容可以设置为滚动操作中的删除一般会结合antd的Popconfirm使用，进行二次确认操作，使用antd的Space设置元素之间的距离如：

import { Space, Popconfirm } from 'antd';

 const columns = [
    {
      title: 'type',
      key: 'value',
      dataIndex: 'value',
      //valueEnum:{'1':'选项一的label','2':'2的label值'},
      search:false,//这里控制高级筛选栏某一项是否展示 
      render:(text,record)=>{
        return <>{record.value}</>
      }
    },
     {
      key: 'option',
      title: '操作',
      fixed: 'right',
      render: (text, record) => {
        return (
          <Space>
            <a className="common-a" onClick={() => detailValue(text)}>
              详情
            </a>
            <a className="common-a" onClick={() => editValue(text)}>
              修改
            </a>
            <Popconfirm title="确定删除吗?" onConfirm={() => deleteValue(text)} okText="确认" cancelText="取消">
              <a className="common-a">删除</a>
            </Popconfirm>
          </Space>
        );
      }
    }
 ]

dataSource& request

dataSource这个和antd的使用也是一样的返回一个数组，数组中的每一条数据中和设置的columns匹配

request注意，这是一个async异步函数

这两个都是用来处理数据源的，选择其中一个就可以，如果使用dataSource，需要结合useEffect或者从props中获取数据，如果使用request获取数据的话

options

用于处理table 工具栏

      <ProTable
        columns={[
          {
            title: '企业ID',
            dataIndex: 'corpId',
            key: 'corpId',
            fixed: 'left',
            copyable: true
          }
        ]}
      ></ProTable>

 <ProTable
        columns={[
          {
            title: '企业ID',
            dataIndex: 'corpId',
            key: 'corpId',
            fixed: 'left',
            copyable: true
          }
        ]}
        options={{ fullScreen: true, setting: false, density: false, reload: false }}
      ></ProTable>

2023年开发小总结2:antd和ProComponent使用总结

前言