使用react开发中后台应用时，你是不是也经常会用到☺️

    ProTable--高级表格 - 图1
    通常学会表格的使用，在业务开发中，就可应付50%的中后台管理界面的开发了。
    总结记录一下，可以帮助我们快速的开发啦。

    ProTable--高级表格 - 图2

    proTable 的基础使用

    1. import React, { useState, useRef, useEffect } from 'react'
    2. import type { ProColumns, ActionType } from '@ant-design/pro-table'
    3. import ProTable from '@ant-design/pro-table'
    4. import { debounce } from 'lodash'
    6. // 表头字段
    7. type GithubIssueItem = {
    8.   id: number;
    9.   case_job_name: string; // 任务名称
    10.   case_job_cron: string; // Corn表达式
    11.   case_job_start_time: string; // 任务开始时间
    12.   case_job_interval_time: number; // 任务间隔
    13.   case_job_status: number; // 任务状态
    14.   create_user: string; // 负责人
    15.   case_id: string; // case id
    16. };
    18. interface SunDayProps {
    19.   // props参数类型
    20. }
    22. /**
    23. interface ActionType {
    24.   reload: (resetPageIndex?: boolean) => void;
    25.   reloadAndRest: () => void;
    26.   reset: () => void;
    27.   clearSelected?: () => void;
    28.   startEditable: (rowKey: Key) => boolean;
    29.   cancelEditable: (rowKey: Key) => boolean;
    30. }
    32. // ActionRef 手动触发表格的刷新（例如表格编辑、删除后再次reload）
    33. const ref = useRef<ActionType>()
    34. // 刷新
    35. ref.current.reload();
    36. **/
    38. const SunDay: React.FC<props: SunDayProps> = (props) => {
    39.   const ref = useRef<ActionType>()
    41.   const columns: ProColumns<GithubIssueItem>[] = [
    42.     {
    43.       dataIndex: 'index',
    44.       valueType: 'indexBorder',
    45.       width: 48,
    46.     },
    47.     {
    48.       title: '任务名称',
    49.       dataIndex: 'case_job_comment',
    50.       copyable: true, // 可复制
    51.       ellipsis: true, // 是否自动缩略
    52.       filters: true, // 查询条件中显示
    53.       editable: false
    54.     },
    55.     {
    56.       title: 'Corn',
    57.       dataIndex: 'case_job_cron',
    58.       filters: false,
    59.       copyable: false,
    60.       editable: false,
    61.       search: false
    62.     },
    63.     {
    64.       title: '任务开始时间',
    65.       dataIndex: 'case_job_start_time',
    66.       filters: false,
    67.       copyable: false,
    68.       editable: false,
    69.       search: false
    70.     },
    71.     {
    72.       title: '任务间隔',
    73.       dataIndex: 'case_job_interval_time',
    74.       filters: false,
    75.       copyable: false,
    76.       search: false,
    77.       editable: false
    78.     },
    79.     {
    80.       title: '任务状态',
    81.       dataIndex: 'case_job_status',
    82.       filters: true,
    83.       search: false,
    84.       // eslint-disable-next-line no-nested-ternary
    85.       render: (_, row) => row.case_job_status === 0 ? '待执行' : (row.case_job_status === 1 ? '执行中' : (row.case_job_status === 2 ? '执行完成' : (row.case_job_status === 3 ? '待删除' : '已删除')))
    86.     },
    87.     {
    88.       title: '负责人',
    89.       dataIndex: 'create_user',
    90.       filters: true,
    91.       copyable: false,
    92.       editable: false
    93.     },
    94.     {
    95.       title: 'case id',
    96.       dataIndex: 'case_id',
    97.       filters: false,
    98.       copyable: false,
    99.       search: false,
    100.       editable: false
    101.     },
    102.     {
    103.       title: '操作',
    104.       valueType: 'option',
    105.       render: (text, record, _, action) => [
    106.         <a onClick={this.edit}>编辑</a>,
    107.         <a onClick={this.delete}>删除</a>
    108.       ]
    109.     },
    110.   ]
    112.   // 编辑
    113.   const edit = debounce(async (record) => {
    114.     const res = await backServe({id: record.id})
    115.     if (res.code === 200) {
    116.       // ref.current.reload() 刷新
    117.     }
    118.   }, 500)
    120.   // 删除
    121.   const delete = debounce(async (record) => {
    122.     const res = await backServe({})
    123.     if (res.code === 200) {
    124.       // ref.current.reload() 刷新
    125.     }
    126.   }, 500)
    128.   return (
    129.     <ProTable<GithubIssueItem>
    130.       rowKey="id" // antd v3 和 antd v4 有区别哦
    131.       headTitle="高级表格"
    132.       columns={columns}
    133.       actionRef={ref}
    134.       request={async (params) => {
    135.         // params: T & {
    136.              pageSize: number;
    137.              current: number;
    138.           },
    139.         // 第一个参数 params 查询表单和 params 参数的结合
    140.             // 第一个参数中一定会有 pageSize 和  current ，这两个参数是 antd 的规范
    141.         const { pageSize, current, ...reset } = params
    142.         const res = await myQuery({ pageIndex: current, pageSize: pageSize, ...reset })
    143.         return {
    144.           data: res.result,
    145.           success: true, // success 请返回 true, 不然 table 会停止解析数据，即使有数据
    146.           total: res.total || 0 // 不传会使用 data 的长度，如果是分页一定要传
    147.         }
    148.       }}
    149.       pagination={{ pageSize: 10 }}
    150.     />
    151.   )
    152. }
    154. export default SunDay