React+Hook+ts+antDesign实现table行编辑功能

前言

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

开发开始

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

```

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 | null>(null);

const EditableRow: React.FC = ({ index, ...props }) => { const [form] = Form.useForm(); return (

); }; ```

对EditableCell进行定义

``` const EditableCell: React.FC = ({ title, editable, children, dataIndex, record, handleSave, ...restProps }) => { const [editing, setEditing] = useState(false); const inputRef = useRef (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>

    },
];

```

结果展示

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