useDynamicList+table实现动态表格编辑

useDynamicList官网

Demo

import { MinusCircleOutlined, PlusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { useDynamicList } from 'ahooks';
import { Button, Form, Input, InputNumber, Space, Table } from 'antd';
import React, { useEffect, useState } from 'react';

interface Item {
    firstName?: string
    code?: string
    age?: Number
}
const mockData = [
    { firstName: 'Maray', code: 'PYHDF', age: 12 },
    { firstName: '小红', code: 'CVGDJK', age: 18 },
]

export default () => {
    const [form] = Form.useForm();
    const [dataSource, setDataSource] = useState([]);

    const [result, setResult] = useState('');

    const { list, remove, push, getKey, sortList, unshift, resetList } = useDynamicList(mockData);

    // useEffect(() => {
    //     // 初始化赋值
    //     resetList(mockData)
    // }, [])

    const columns = [
        {
            title: "名称",
            dataIndex: 'firstName',
            key: 'firstName',
            render(text: string, row: Item, index: number) {
                return (
                    <Form.Item required name={['params', getKey(index), 'firstName']} initialValue={text} noStyle>
                        <Input placeholder='firstName' style={{ width: '120px', marginRight: 16 }} />
                    </Form.Item>
                )
            }
        },
        {
            title: "Code",
            dataIndex: 'code',
            key: 'code',
            render(text: string, row: Item, index: number) {
                return (
                    <Form.Item required name={['params', getKey(index), 'code']} initialValue={text} noStyle>
                        <Input placeholder='code' style={{ width: '120px', marginRight: 16 }} />
                    </Form.Item>
                )
            }
        },
        {
            title: "年龄",
            dataIndex: 'age',
            key: 'age',
            render(text: number, row: Item, index: number) {
                return (
                    <>
                        <Form.Item required name={['params', getKey(index), 'age']} initialValue={text} noStyle>
                            <InputNumber min={1} style={{ width: '120px', marginRight: 16 }} />
                        </Form.Item>
                        <Button.Group>
                            <Button danger onClick={() => remove(index)}>删除</Button>
                        </Button.Group>
                    </>
                )
            }
        },
    ]
    return (
        <>
            <Form form={form} onFinish={(val) => {
                console.log('val', val)
                const sortResult = sortList(val.params);
                setResult(JSON.stringify(sortResult, null, 2));
                console.log('resule', JSON.stringify(sortResult, null, 2))
            }}>
                <Table
                    dataSource={list}
                    columns={columns}
                    rowKey={(r: Item, index: number) => { getKey(index).toString() }}
                />
                <Form.Item>
                    <Button type='dashed'
                        onClick={() => {
                            // push({ firstName: '', code: '', age: 12 })
                            unshift({ firstName: '', code: '', age: 12 }) //开头追加
                        }}
                        icon={<PlusOutlined />}>
                        添加一行
                    </Button>
                </Form.Item>
                <Form.Item>
                    <Button htmlType='submit' type='primary'>提交</Button>
                </Form.Item>
            </Form>
        </>
    );
};

效果图