UI组件 - ProComponents - 1

1 ProComponents 简单说明

1 特点
-----------------------------------------------------------------------------------------
  1 ProComponents 组件基于 Ant Design [v4] 的封装 --> 形成功能, 更丰富更大的组件 (可高效开发, 但缺少灵活性)

  2 Ant Design 或 ProComponents 文档说明, 和实际应用很多地方存在一定的差异性   // 也是做笔记的一个原因

  3 注意有一部分是需要先单独安装依赖才可以使用的
-----------------------------------------------------------------------------------------


2 学习思路
-----------------------------------------------------------------------------------------
  1 结合 ProComponents 项目文件 + 文档   // 单纯的文档有时候并不好理解

  2 要明确每个常用组件的 --> 作用 + 使用   // 总结笔记 +

  3 要明确每个常用组件在常见的业务逻辑中 -> 通常扮演着什么样的角色   // 总结笔记 +

  4 组件构成 --> 组件标签的 API 属性 [作用 + 使用]   // 核心 -> 常用 API 的总结 +

  5 组件之间的结合使用 + 功能的业务逻辑联动 + [ProComponents 和 Ant Design 共享API的特殊性]   // 总结笔记 +
-----------------------------------------------------------------------------------------

2 表单数据域

1 说明
-----------------------------------------------------------------------------------------

  1 可以自动收集, 我们输入表单的数据, 放到一个对象中, 提供请求参数   // 应该还有其它功能

  2 Ant Design (v3) 中通过 --> Form.create() 高阶函数包装使用其内置的一些 API

  3 Ant Design (v4) 中提供 --> 函数式组件 / 类组件 --> 俩种使用数据域的方式

  4 Ant Design (v4) 中的 API 文档 --> Form 下面的 API 中 --> Form.Provider/FormInstance   // 后面跟着的是使用范式

  5 ProComponents 也是可以看做是 Ant Design (v4) 来设置操作的, 
------------------------------------------------------------------------------------------



2 函数式组件中: 
------------------------------------------------------------------------------------------
  const [form] = Form.useForm()   // 获取

  form.xxx()   // 调用其内置的 API
------------------------------------------------------------------------------------------


3 类组件中  (使用方式和文档有一定的差异 !!!)
------------------------------------------------------------------------------------------
1 文档中 ↓
	formRef = React.createRef<FormInstance>()   // 获取
	this.formRef.current!.resetFields()   // 调用 API

2 实际使用中 ↓
	import {createRef} from 'react'   // 或代码中调用

	actionRef = createRef()   // 不太懂
    formRef = createRef()
------------------------------------------------------------------------------------------

3 表单 Pro Form

1 说明
------------------------------------------------------------------------------------------
  1 这个看着就是个狗东西

  2 看着项目中的组件标签, 好像并没有直接去调用 ProFrom 组件, 反而是一些其他表单组件
------------------------------------------------------------------------------------------


2 DrawerForm
------------------------------------------------------------------------------------------
  import { DrawerForm } from '@ant-design/pro-form'

  <DrawerForm
	  title={}
	  visible={}
	  drawerProps={}
	  onFinish={}
	  initialValues={}
  >

  </DrawerForm>
------------------------------------------------------------------------------------------

4 表格 ProTable

1 说明
------------------------------------------------------------------------------------------
  1 数据展示通常为 --> 列表 + 表格

  2 表格又分为 --> 高级表格 + 可编辑表格  (居然可以在高级表格中使用 -- 可编辑表格的标签 API)

  3 注意 --> 说明文档中的 API 并不全 --> 有的只在示例中, 有的是 Ant Design 中的表格属性

  4 使用 ProComponents 的 ProTable 时, 为了灵活性可直接使用 Ant Design 中 Table 的标签 API
------------------------------------------------------------------------------------------



2 ProTable 组件标签 --> 常用的 API 属性   // 最后面的注释是, 文档位置
------------------------------------------------------------------------------------------

  1 import ProTable from '@ant-design/pro-table'   // 需要单独下载依赖包

	<ProTable 
		headerTitle = ""   // 表格左上边的文字标题 --> 示例中
		bordered   // 布尔属性 --> 表示带边框的表格 --> Ant Design
		actionRef={this.actionRef}   // 是那个类组件, 获取表单数据域的纽带 --> ProTable
		formRef={this.formRef}   // 也是表单数据域的纽带 --- 和上面的区别暂时不知道 --> ProTable
		rowKey="id"   // 表格行 key 的取值，可以是字符串或一个函数 ---> Ant Design
		search={{}}   // 是否显示搜索表单，传入对象时为搜索表单的配置, 有一小点明白 ---> ProTable
		pagination={{}}   // 分页器的相关配置 ---> Ant Design
		toolBarRender={}   // 渲染工具栏 --> 不太懂 ---> ProTable
		columns={this.columns}   // 终于是最简单的, 表格列的导航栏, 但是也有不少可操作空间的 --> Ant Design
		request={}   // 获取数据源的方法, 只是大致知道干什么的 ---> ProTable
		rowSelection={}   // 表格行是否可选择, 好多配置项, 看不懂, 好难 ---> Ant Design
		expandedRowRender={}   // 执法仪管理, 项目里面的, 这可能是个自定义事件  // 确定不以 on 开头是否可以
	>
	
	</ProTable>
  
------------------------------------------------------------------------------------------

5 ProCard

------------------------------------------------------------------------------------------


------------------------------------------------------------------------------------------