antdesign-pro EditableProTable编辑时组件联动

示例代码对EditableProTable进行了字段联动(主要是checkbox的)

场景：表格数据给定完成之后，整张表格直接开启编辑模式，isHidden与isReadOnly的可编辑状态下进行互斥，在处于编辑模式下，表格展示的数据可以使用form来进行控制，所以可以使用form的方法进行清除历史填写的内容，给各个组件赋值(具体内容看代码呀，注释写的很详细)

import { EditableFormInstance, EditableProTable } from '@ant-design/pro-components'
import { Button, Checkbox, Col, Form, Modal, Row, message } from 'antd'
import { useEffect, useRef, useState } from 'react'

//这里是将组件给提取出来，自动会被form给传递value和onchange这点跟form表单是一样的
const CheckboxComponent: React.FC<{
    value?: any
    onChange?: any
    keyValue?: string
    form?: any
    recordId?: string
}> = ({ value, onChange, keyValue, form, recordId }) => {
    const [newValue, setNewValue] = useState<any>(value)

    useEffect(() => {
        setNewValue(value)//这里监听一下form更改了该组件的值之后改变value的显示
    }, [value])

    const handleInputChange = (e) => {
        onChange(e.target.checked)
        setNewValue(e.target.checked)
        // *****这里是个很大的坑，form表单的值在EditableProTable中是这个样子的{id1:{第一行数据},id2:{第二行数据}}，所以这里需要通过recordId来获取到对应的值
        if (keyValue === 'isHidden' && recordId) {//这里就可以对表单联动填写代码逻辑了

            form.setFieldsValue({ [recordId]: { isReadOnly: !e.target.checked } })
        } else if (keyValue === 'isReadOnly' && recordId) {
            form.setFieldsValue({ [recordId]: { isHidden: !e.target.checked } })
        }
    }

    return (
        <Checkbox
            checked={newValue}
            onChange={handleInputChange}
        />
    )
}

const TestTable = (props: {}) => {
    const [data, setData] = useState<any[]>([])
    const [loading, setLoading] = useState(false)
    const [editableKeys, setEditableRowKeys] = useState<any[]>([])
    const [form] = Form.useForm()

    const getData = async () => {
        setLoading(true)
        try {
            //   ...获取表格内容
        } catch (error) {
            console.log('err', error)
        }
        setLoading(false)
    }

    useEffect(() => {
        form.resetFields()
        setEditableRowKeys([])

        getData()
    }, [])

    useEffect(() => {
        return () => {
            setData([])
            setEditableRowKeys([])
        }
    }, [])

    const columns = [
        {
            title: '标题',
            dataIndex: 'text',
            key: 'text',
            width: 80,
            readonly: true,
            onclick: (e) => {
                e?.stopPropagation()
            },
        },
        {
            title: '字段名称',
            dataIndex: 'fieldName',
            key: 'fieldName',
            width: 100,
            readonly: true,//当编辑模式下不允许更改时可以使用该元素
        },
        {
            title: '隐藏',
            dataIndex: 'isHidden',
            key: 'isHidden',
            width: 50,
            render: (text: any) => {
                if (text === null) {
                    text = false
                } else {
                    text = text === true ? true : false
                }
                return <Checkbox checked={text || false} />
            },
            renderFormItem: (record) => {
                return (
                    <CheckboxComponent form={form} keyValue="isHidden" recordId={record.entry.id} />
                )
            },
        },
        {
            title: '只读',
            dataIndex: 'isReadOnly',
            key: 'isReadOnly',
            width: 50,
            render: (text: any) => {
                if (text === null) {
                    text = false
                } else {
                    text = text === true ? true : false
                }
                return <Checkbox checked={text || false} />
            },
            renderFormItem: (record) => {
                return (
                    <CheckboxComponent
                        form={form}
                        keyValue="isReadOnly"
                        recordId={record.entry.id}
                    />
                )
            },
        },
  // 如果不想要封装的组件，可以使用下面这个方式
        // {
        //     title: '只读',
        //     dataIndex: 'isReadOnly',
        //     key: 'isReadOnly',
        //     width: 50,
        //     render: (text: any) => {
        //         if (text === null) {
        //             text = false
        //         } else {
        //             text = text === true ? true : false
        //         }
        //         return <Checkbox checked={text || false} />
        //     },
        //     renderFormItem: (record) => {
        //         return (
        //             value:any,onChange:any)=>{
        //                 return (
        //                     <Checkbox
        //                         checked={value}
        //                         onChange={onChange}
        //                     />
        //                 )
        //             }
        //     },
        // },
        {
            title: 'name',
            dataIndex: 'name',
            key: 'name',
            width: 100,
        },
    ]

    const saveOperation = async () => {
        try {
            const value=await form.validateFields()//使用form表单获取到编辑之后的新数据
            //保存编辑之后内容接口函数
        } catch (error) {
            console.log('err', error)
        }
    }

    return (
        <>
            <div>
                <Button
                    size="small"
                    type="primary"
                    style={{ marginLeft: '5px' }}
                    onClick={() => {
                        saveOperation()
                    }}>
                    保存
                </Button>
                <Button
                    size="small"
                    type="primary"
                    style={{ marginLeft: '5px' }}
                    onClick={() => {
                        if (editableKeys.length === 0) {
                            setLoading(true)
                            setTimeout(() => {
                                if (data.length > 0) {
                                    setEditableRowKeys(data.map((item) => item.id)
                                }
                                setLoading(false)
                            }, 100)
                        } else {
                            form.resetFields()
                            setEditableRowKeys([])
                        }
                    }}>
                    开启编辑
                </Button>
            </div>
            <EditableProTable
                size="small"
                rowKey="id"
                scroll={{
                    y: '470px',
                }}
                loading={loading}
                recordCreatorProps={false}
                columns={columns}
                value={data}
                onRow={(record: any, index: any) => {
                    return {
                        record,
                        data: data,
                        index,
                    } // 可编辑时，使用默认组件或无拖拽功能的组件
                }}
                editable={{
                    type: 'multiple',
                    form: form,//form对于数据联动直接非常重要
                    editableKeys,
                    onChange: setEditableRowKeys,
                    actionRender: (row, config, dom) => [dom.save, dom.cancel],
                }}
            />
        </>
    )
}

export default TestTable

内心os：快下班写的，有些粗糙，大家见谅呀，有时间来优化一下