【antd组件之ProTable，EditableProTable】

1. 每一列数据

// 每一列数据// type是定义了一个新类型，每一个就是定义columns的dataIndex
type GithubIssueItem ={url: string;id: number;number: number;title: string;labels:{name: string;color: string;}[];state: string;comments: number;created_at: string;updated_at: string;
  closed_at?: string;};

2. ProColumns配置项

// 所有table需要配置的属性，都可以在最前面定义，下面直接用 columns={columns}使用// 定义了几列，每一列的配置// 类型是ProColumns，相当于ProTable里面的columns列// 列定义/**
 * 
{
  title//列头显示文字
  align//设置列里面文字的对齐方式  left,rignt,center
  className//列样式类名
  colSpan//表头列合并
  dataIndex//列数据在数据项中对应的路径，支持通过数组查询嵌套路径
  key//React 需要的 key，如果已经设置了唯一的 dataIndex，可以忽略这个属性
  render//生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引
  function(text, record, index) {}
  ellipsis//是否自动缩略
  copyable//是否支持复制，会出现复制的小图标
  valueEnum//值的枚举，会自动转化把值当成 key 来取出要显示的内容
  valueType
  filedProps
  // valueType和fieldProps会把上面那个form查询表单渲染为select类型的下拉框
  // 里面的值就是fieldProps里的options
  valueType: 'select',
  fieldProps:{
    options: statusList
  },
  render: (_: any, record: any) => {
    console.log(record)
    return (
      <>
        <Badge
          status={record.status === 1 ? "success" : "error"}
          text={record.status === 1 ? "启用" : "禁用"} />
      </>)
  }
}

*/

3. ProTable配置项

// table属性/****
 * request//获取 dataSource 的方法
 * (params?: {pageSize,current},sort,filter) => {data,success,total}    
 * 会返回一个对象，具有data,success,total三个属性,
 * data就是table的数据源，total就是右下角那个共多少条
 * 必须配合 manualRequest={false}一起使用
 * 如果配置 manualRequest={true} 的话，需要手动点击上面的查询按钮才能获取到数据
 * eg:request={() => {
      return Promise.resolve({
        total: 200,
        data: tableListDataSource,
        success: true,
      });
    }}

  * manualRequest//是否需要手动触发首次请求, 配置为 true 时不可隐藏搜索表单
  * columns//表格列的配置描述，具体项见下表
  * dataSource//数据数组,Table 的数据，protable 推荐使用 request 来加载
  * eg:      
  * // dataSource={tableListDataSource}
      request={() => { 
        return Promise.resolve({
          total:200,
          data:tableListDataSource,
          success:true
        })
       }}
  * 
  * defaultData//默认数据
  * actionRef//Table action 的引用，便于自定义触发
  * formRef // 可以获取到查询表单的 form 实例，用于一些灵活的配置
  * //好像就是table右上角的按钮
  * toolBarRender//渲染工具栏，支持返回一个 dom 数组，会自动增加 margin-right,
  * (action) => ReactNode[]
  * eg:
  *   toolBarRender={() => [
        <Button key="button" icon={<PlusOutlined />} type="primary">
          新建
        </Button>,
        <Dropdown key="menu" overlay={menu}>
          <Button>
            <EllipsisOutlined />
          </Button>
        </Dropdown>,
      ]}
  * 
  * options //table 工具栏，设为 false 时不显示.传入 function 会点击时触发
  * eg：
  *     options={{   
          // 密度，每个框框的高度
          density: false,
          // 全屏
          fullScreen: false,
          // 刷新
          reload: false,
          // 设置
          setting:false,
          // 搜索input框
          search: true 
        }}

  * search //是否显示搜索表单，传入对象时为搜索表单的配置,就是table上面的那个搜索表单
      只能赋值false或者配置项
      通过对象形式进行控制，搜文档
  * 
  * editable //可编辑表格的相关配置
  * 
  * columnsState //受控的列状态，可以操作显示隐藏
  * 
  * pagination //分页的配置项。
  * 
  * dateFormatter //转化 moment 格式数据为特定类型，false 不做转化
  * 
  * *
  * onLoad //数据加载完成后触发,会多次触发
    * pagination //分页器   
    *  pagination={{current:1,total:20}}
  * rowKey  // 表格行 key 的取值，可以是字符串或一个函数
    rowKey="id"
    * rowSelection // 表格行是否可选择 对象 
  * 如果配置为可选 ，则会自动添加一列 可以配置为checkout || radio
    rowSelection={{
      // 固定为左边
      fixed: true,
      // 显示上面已选择几项
      alwaysShowAlert: true,
      // 选中项发生变化时的回调，设置选中行为当前所有行
      onChange: (keys, rows) => {
        console.log(keys, rows)
        setSelectedRows(rows)
      }
    }}
    * 
    * 
    *
    ****
  * 

4. EditableProTable

// columns配置//   editable: false || (_: any, record: any, index: number) => Boolean, 如果不设置，则默认这一行都可以编辑/***
 * EditableProTable配置项
 * 
 * * 用value使表格的数据可控，当整个表格通过request请求得到数据后，就会触发表格的onChange事件，将数据存入dataSource里面
 * 
 * * actionRender自定义操作栏
 *    可编辑表格默认提供了三大金刚，保存，删除和取消，如果我们要实现复制一行，或者需求只需要 保存和取消， 不需要删除按钮就需要自定义
 * 
 *     #编辑 ，复制此行到末尾
 *      render: (text, record, _, action) => {
 *        return [
 *          <a
 *            key="editable"
 *            onClick={() => {
 *              action?.startEditable?.(record.id);
 *            }}
 *          ></a>,
 *          <EditableProTable.RecordCreator
 *            record={{
 *              ...record,
 *              id: (Math.random() * 1000000).toFixed(0),
 *            }}
 *          }}><a>复制此行到末尾</a></EditableProTable.RecordCreator>
 *        ] 
 *      }
 * 
 * 
 * 
 * 1. value 相当于ProTable的dataSource
 * 2. onChange  dataSource 修改时触发，删除和修改都会触发,如果设置了 value，Table 会成为一个受控组件。
 * 3. editable 可编辑表格的相关配置 
 *   ① type: 可编辑表格的类型，单行编辑或者多行编辑 single || multiple
 *   ② editableKeys: 正在编辑的行，受控属性
 *   ③ onChange: 行数据被修改时触发 (editableKeys, editableRows) => void
 *   ④ onSave: 保存一行的时候触发 (key, row， originRow, newLine) => Promise
 *   ⑤ saveText: 保存一行的文字
 *   ⑥ onDelete: 删除一行的时候触发 (key, row) => Promise
 *   ⑦ deleteText: 删除一行的文字 
 *   ⑧ onCancel: 取消一行时触发 (key, row, originRow, newLine) => Promise
 *   ⑨ actionRender: 点击编辑后这列显示的操作
 * 
 *         actionRender: (row, config, defaultDom) => {
            return [
              defaultDom.save,
              defaultDom.delete || defaultDom.cancel,
              <a
                key="set"
                onClick={() => {
                  i++;
                  editorFormRef.current?.setRowData?.(config.index!, {
                    title: '动态设置的title' + i,
                  });
                }}
              >
                动态设置此行
              </a>,
            ];
          },
 * 
 * 4. recordCreatorProps新建按钮配置，|| false   同时使用 actionRef.current?.addEditRecord(row)  来控制新建行。
 *        {
 *          position: 'bottom',
 *          type: 'primary'
 *         }
 *         actionRef.current?.addEditRecord?.({
              id: (Math.random() * 1000000).toFixed(0),
              title: '新的一行',
            });

 *   ① position 配置添加在表格头还是表格尾部 bottom || top 
 *   ② record  配置新增行的默认数据   record: () => ({ id: (Math.random() * 1000000).toFixed(0) }),
 *   ③ style 按钮的样式设置，可以设置按钮是否显示，
 *    style: {
 *      position: 'absolute ,
 *      left: 0,
 *      top: -4,
 *    }
 *   ④ parentKsy  要增加到哪个节点下
 *   ⑤ creatorButtonText  设置按钮文案
 * 
 * 
 *   
 * 
 */