1 说明

1 文档中有很多代码是让人难以接受的

2 

2 难以接受的代码

  文档 --> const columns: ProColumns<GithubIssueItem>[] = [ ...]   // 可能就是在描述, 你要给我赋值一个数组
  实际 --> columns = [ ...]   // 主要用于设置表头的

  文档 --> <ProTable <TableListItem> columns={this.columns}/>   // 某些不合理的 <> 内容可以认为是注释信息
  实际 --> <ProTable columns={this.columns}/>

  文档 --> const ref = useRef<ActionType>()   // useRef 都查不到
  实际 --> const ref = React.createRef()   // 理解为, 创建一个自己的 Refs

  文档 --> { transform: (value: any) => any }
  实际 --> { transform:  }

  文档 --> (action) => ReactNode[]   // 表示数组里面放, 标签元素
  实际 --> () => [<Button>呵呵<Button/>, <Button>哈哈<Button/>]   // 可以没有参数

3 文档常识问题

1 ReactNode --> 表示元素标签

3 组件标签的常用 API 属性

<ProTable 
	headerTitle = ""   // 表格左上边的文字标题 --> 示例中
	bordered   // 布尔属性 --> 表示带边框的表格 --> Ant Design
	actionRef={this.actionRef}   // 可手动触发 table 的 reload(重新加载) 等操作 --> 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 开头是否可以
>


1 actionRef   // 使用流程
-------------------------------------------------------------------------------
  actionRef = React.createRef()   // 组件中定义方法的位置, 创建 Refs
  <ProTable actionRef={this.actionRef} />   // 结合上面, 应该是那个重置功能
-------------------------------------------------------------------------------


2 columns   // 涉及问题
-------------------------------------------------------------------------------
columns = [
  {
    title: '用户',   // 表头标题名
    dataIndex: 'username',   // 列数据在数据项中对应的路径, 支持通过数组查询嵌套路径
    key: 'username',   // 保证其唯一性, 如果已经设置了唯一的 dataIndex, 可以忽略这个属性
    hideInSearch: true,   // 默认会出现该项对应的搜索表单, 设置这个即可隐藏 --- 太牛逼了这功能
    render: () => {},   // 貌似可以控制表格内容或格式的
    renderFormItem: () => {},   // 渲染查询表单的输入组件
    hideInTable: true,   // 在表格中不显示
    valueType: 'unitTree',   // 自定义, 文档可以说是根本看不懂
    ellipsis: true,   // 关于自动收缩的
  }
]
-------------------------------------------------------------------------------

3 "columns/valueType"   // 绿色的是 columns 的内置 API
-------------------------------------------------------------------------------
很多步骤 -- 视图笔记有

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


3 rowSelection   // 多选功能涉及的问题 -- Ant Design
-------------------------------------------------------------------------------
rowSelection={{   // 传入的应该是一个对象
  onChange: () => {}   // 选中项发生变化时的回调 -- 还有很多配置项
}}
-------------------------------------------------------------------------------


4 toolBarRender
-------------------------------------------------------------------------------
toolBarRender = () => [
    <Button type="primary" key="primary" onClick={() => {this.setState({showFormModal: true})}}>
      <PlusOutlined /> {___('新增')}
    </Button>,
    <Button type="primary" key="primary" onClick={() => {}}>
      <ImportOutlined /> {___('导入')}
    </Button>
  ]

toolBarRender={this.toolBarRender}
-------------------------------------------------------------------------------


5 search   // ProTable 自带重置和查询, 这个 API 可以在此位置添加新的按钮
-------------------------------------------------------------------------------
search={{
            labelWidth: 70,
            optionRender: (searchConfig, formProps, dom) => [
              ...dom.reverse(),
              <ExcelBar key="export" type="default" name={___('导出')} url='/api/log/export'
                params={() => {
                  return formProps.form.getFieldsValue()
                }}
              />
            ]
          }}   // 有很多自己的 API 不是看的很懂
-------------------------------------------------------------------------------


6 pagination   // 分页器
-------------------------------------------------------------------------------
pagination={{
  show: true,   // 文档没有
  size: 'default',   // 当为 small 时, 是小尺寸分页
  pageSize: 10,   // 每页条数
  current: 1,   // 当前页数
}}
-------------------------------------------------------------------------------


7 request   // 获取数据的 API
-------------------------------------------------------------------------------
import { query } from '@/services/userApi';   // 数据接口

querySearch = async (params, sorter, filter) => {

    // 改变分页传参，服务端要求的参数是page
    params.page = params.current
    const result = await query({ ...params, perPage: params.pageSize, sorter, filter });
    return {
      data: result.data.data,
      total: result.data.total,
      success: true,
      pageSize: result.data.perPage,
      current: parseInt(`${params.currentPage}`, 10) || 1,
    }
  }

request={(params, sorter, filter) => this.querySearch(params, sorter, filter)}
-------------------------------------------------------------------------------


8 
-------------------------------------------------------------------------------


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