【React工作记录八十三】React+Hook+ts+antDesign实现table行编辑功能

前言

大家好 我是歌谣 今天要说的是ant design实现表格行编辑的功能 考虑问题的时候我们需要多看官方的api

开发开始

紧接着我们对照着api进行开发 首先加一个table

<Table
                     onChange={onTableChange}
                        rowKey="id"
                        components={components}
                        rowClassName={() => 'editable-row'}
                        bordered
                        dataSource={menuData.list}
                        pagination={{
                            pageSizeOptions: ['5', '10', '20', '50'],
                            
                            total: menuData?.page.dataTotal,
                            showTotal: () => {
                                return '共 ' + menuData?.page.dataTotal + ' 条记录';
                            },
                        }}
                        columns={columns as ColumnTypes}
                        rowSelection={rowSelection}

                    />

对component进行定义

const components = {
        body: {
            row: EditableRow,
            cell: EditableCell,
        },
    };

对 EditableRow进行定义

参照官网api引入对应的依赖

const EditableContext = React.createContext<FormInstance<any> | null>(null);

const EditableRow: React.FC<EditableRowProps> = ({ index, ...props }) => {
    const [form] = Form.useForm();
    return (
        <Form form={form} component={false}>
            <EditableContext.Provider value={form}>
                <tr {...props} />
            </EditableContext.Provider>
        </Form>
    );
};

对EditableCell进行定义

const EditableCell: React.FC<EditableCellProps> = ({
    title,
    editable,
    children,
    dataIndex,
    record,
    handleSave,
    ...restProps
}) => {
    const [editing, setEditing] = useState(false);
    const inputRef = useRef<InputRef>(null);
    const form = useContext(EditableContext)!;

    useEffect(() => {
        if (editing) {
            inputRef.current!.focus();
        }
    }, [editing]);

    const toggleEdit = () => {
        setEditing(!editing);
        form.setFieldsValue({ [dataIndex]: record[dataIndex] });
    };


    const save = async () => {
        try {
            const values = await form.validateFields();
            toggleEdit();
            handleSave({ ...record, ...values });
        } catch (errInfo) {
            console.log('Save failed:', errInfo);
        }
    };

    let childNode = children;

    if (editable) {
        childNode = editing ? (
            <Form.Item
                style={{ margin: 0 }}
                name={dataIndex}
                rules={[
                    {
                        required: true,
                        message: `${title}不能为空`,
                    },
                ]}
            >

                <Input ref={inputRef} onPressEnter={save} onBlur={save} />
            </Form.Item>
        ) : (
            <div className="editable-cell-value-wrap" style={{ paddingRight: 24 }} onClick={toggleEdit}>
                {children}
            </div>
        );
    }

    return <td {...restProps}>{childNode}</td>;
};

handleSave进行定义

const handleSave = (row: any) => {
        // console.log(batchUpdateSizeList)
        batchUpdateSizeList([{
            id: row.id,
            size: row.sizeName
        }])
            .unwrap()
            .then((response: any) => {
                if (response.code === 200) {
                    message.success("操作成功")
                }
            });
        const newData: any = [...menuData.list];
        const index = newData.findIndex((item: any) => row?.id == item.id);
        const item = newData[index];
        newData.splice(index, 1, {
            ...item,
            ...row,
        });
        setMenuData({
            list: newData, page: {
                dataTotal: menuData.page.dataTotal,
                size: menuData.page.size,
            }
        });
    };

handleSave中的数据是核心 利用当前行数据的回调可以处理数据和接口 完成当前行的更新

对表头column的设置

const columns = defaultColumns.map(col => {
        if (!col.editable) {
            return col;
        }
        return {
            ...col,
            onCell: (record: any) => ({
                record,
                editable: col.editable,
                dataIndex: col.dataIndex,
                title: col.title,
                handleSave,
            }),
        };
    });

对默认column的设置

以上是对column函数数据处理的讲解 接下来设置defaultColumn数据的设置 对可以操作的属性editable变为true即可

const defaultColumns: (ColumnTypes[number] & { editable?: boolean; dataIndex: string })[] = [
        {
            title: '颜色',
            dataIndex: 'colorName',
            editable: false,

        },
        {
            title: '尺码',
            dataIndex: 'sizeName',
            editable: true,

        },
        {
            title: '扎号',
            dataIndex: 'lotCode',
            editable: false,
        },

        {
            title: '床号',
            dataIndex: 'bedCode',
            editable: false,

        },
        {
            title: '床次',
            dataIndex: 'bedSeq',
            editable: false,

        },
        {
            title: '每扎数量',
            dataIndex: 'lotCount',
            editable: false,

        },
        {
            title: '缸号',
            dataIndex: 'batchCode',
            editable: false,

        },
        {
            title: '裁片名称',
            dataIndex: 'cuttingName',
            editable: false,

        },
        {
            title: '结果',
            dataIndex: 'result',
            editable: false,

        },
        {
            title: '操作',
            dataIndex: 'operation',
            render: (_, record: any) =>

                <a onClick={() => handlePrintData(_, record)}>打印</a>

        },
    ];

结果展示

双击即可进行编辑操作 这个问题相对还是非常简单的 对照官网的案例进行修改即可 我是歌谣 微信公众号前端小歌谣 谢谢你的一键三联