记一次使用ant-design-pro的EditableProTable可编辑表格

项目中有个需求是，在表格里面填写日报，并且可以增加删除列，本着多尝试的原则，我采用了and-design-pro的EditableProTable来做这个需求，下面详述一下步骤：

ant design pro库里面的各个components在npm中是独立的包，每个都需要单独下载：

npm i @ant-design/pro-table --save
复制代码

安装完成之后，在项目中引入组件

import { EditableProTable } from '@ant-design/pro-table'
复制代码

然后就可以在业务代码中愉快的使用了

先定义一下表头列数据：

const renderTitle = (title: string) => { // 注意：这个方法不是必须的。只是用来自定义table的标题
    return (
        <span>
            <span style={{ color: 'red' }}>*</span>
            {title}
        </span>
    )
};

const columnsPro = [
    {
        title: renderTitle('选择项目'), // 因为表格需要自定义表头。我这里是自己封装了一个方法来渲染表格的标题
        dataIndex: 'title',
        width: '30%',
        formItemProps: {
            rules: [ // 这个对应的就是ant-design组件中form.item的rules，用来做表单校验
                {
                    required: true,
                    whitespace: true,
                    message: '此项是必填项',
                },
                {
                    max: 16,
                    whitespace: true,
                    message: '最长为 16 位',
                },
                {
                    min: 6,
                    whitespace: true,
                    message: '最小为 6 位',
                }
            ],
        },
    },
    {
        title: '状态',
        key: 'state',
        dataIndex: 'state',
        // valueType: 'select', // 如果直接通过valueType指定表格中的组件的话，就不需要自定义renderFormItem这个属性了
        renderFormItem: (text, row, index) => {
            return (
                <Select
                    onChange={() => onSelectChange(row)}
                    onClick={() => showSalespersonModal(row)}
                    options={[{ label: '测试数据', value: '123' }]}
                ></Select>
           )
        },
        valueEnum: {
            all: { text: '全部', status: 'Default' },
            open: {
                text: '未解决',
                status: 'Error',
            },
            closed: {
                text: '已解决',
                status: 'Success',
            },
        },
    },
    {
        title: '描述',
        dataIndex: 'decs',
    },
    {
        title: '操作',
        valueType: 'option',
        width: 250,
        render: () => {
            return null;
        }
    }
]
复制代码

renderFormItem的作用是在valueType对应的默认类型无法满足你的需求的情况下，开放一个接口来让你可以自定义表格单元格里的内容。如果要想renderFormItem里面的组件的值变化时，能够触发dataSource的自动更新，那么，该组件必须拥有value以及onChange事件（比如Input，select等ant-design的基础组件）。也就是这里的这种高度定制化，使我在做自己的需求时候的一个坑。导致我最终只能放弃使用protable，两个小时又白费T.T。

没有 value 将会无法注入值，没有 onChange 会无法修改行数据

const [dataSource, setDataSource] = useState(initDataSource)

const initDataSource = [
   {    
        id: 0,
        title: "标题1",
        decs: "这是描述1",
        state: "open",
        created_at: "2020-05-26T09:42:56Z"
    },
    {
        id: 1,
        title: "标题2",
        decs: "这是描述2",
        state: "open",
        created_at: "2020-05-26T09:42:56Z"
    }
]

<EditableProTable
    maxLength={10}
    controlled  // 是否受控, 如果受控每次编辑都会触发 onChange，并且会修改 dataSource
    rowKey="id"
    headerTitle="可编辑表格"
    columns={columnsPro}
    value={dataSource}
    onChange={handleEditableTableChange}
    recordCreatorProps={{
        creatorButtonText: '添加',
        newRecordType: 'dataSource',
        record: () => ({
            id: Date.now()
        })
    }}            
    toolBarRender={() => {
        return [
            <Button 
                type="primary"
                key="save"
                onClick={() => {
                    // dataSource 就是当前数据，可以调用 api 将其保存
                    console.log(dataSource)
                }}            
            > 
            暂存 
            </Button> 
            ]; 
        }}
        editable={{
        type: 'multiple',
        editableKeys,
        actionRender: (row: any, config: any, defaultDoms: any) => {
            return [defaultDoms.delete];
        },
        onValuesChange: (record: any, recordList: any) => {
            console.log(recordList);
            setDataSource(recordList);
        },
        onChange: onEditChange,
    }}
/>
复制代码

文中EditableProTable中的api比如onChange用来监听组件的删除与value变化，recordCreatorProps配置渲染按钮，editable控制表格的编辑逻辑就不多说了，详细的api可以参考官方文档。ant-design-pro中pro-table的API

当你在表格里修改或者删除数据时，通过onChange、onValuesChange的recordList参数都可以获取到最新的数组，数组对应的就是table中的所有数据。拿到该数据之后，尽情愉快的去使用吧

最终的效果如图。准备截图~发现全是公司的水印，算了。大家看下官网的demo吧