antd 可编辑table项，并提交编辑后的内容

一麻袋小猫

已于 2023-05-05 17:21:39 修改

阅读量541

点赞数

分类专栏： React 工具文章标签： javascript react.js 前端

于 2023-05-05 17:20:31 首次发布

本文链接：https://blog.csdn.net/Zmongo/article/details/130511229

版权

工具同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

React

29 篇文章 1 订阅

订阅专栏

可编辑表格内容

import { Form, Input } from 'antd';

interface Item {
    key: string;
    name: string;
    age: string;
    address: string;
}

interface EditableCellProps {
    title: React.ReactNode;
    editing: boolean;
    children: React.ReactNode;
    dataIndex: keyof Item;
    record: Item;
    checkoutKey?: string[];
}

const EditableCell: React.FC<EditableCellProps> = ({
    editing,
    dataIndex,
    title,
    record,
    children,
    checkoutKey, // 已选择key
    ...restProps
}) => {
    const { key } = record || {};
    const inputNode = <Input autoComplete="off" disabled={(checkoutKey || []).indexOf(key) === -1} />;
    return (
        <td {...restProps}>
            {editing ? (
                <Form.Item
                    name={dataIndex+ '-' + key}
                    style={{
                        margin: 0,
                    }}
                    rules={[
                        {
                            required: true,
                            message: `请输入${title}!`,
                        },
                    ]}
                >
                    {inputNode}
                </Form.Item>
            ) : (
                children
            )}
        </td>
    );
};

export default EditableCell;

表格引用
formTabIn.getFieldsValue() 获取输入的表单内容

<Form form={formTabIn} component={false}>
                        <Table
                            components={{
                                body: {
                                    cell: (props: any) => EditableCell({...props, checkoutKey}),
                                },
                            }}
                            rowSelection={{
                                type: 'checkbox',
                                ...rowSelection,
                            }}
                            columns={column as ColumnTypes}
                            dataSource={data}
                            size="small"
                            bordered={true}
                            rowClassName="editable-row"
                            pagination={false}
                            title={() => '选择输入参数'}
                        />
                    </Form>

表头设置

const column = columns.map((col, index) => {
        if (!col.editing) {
            return col;
        }
        return {
            ...col,
            onCell: (record: DataType) => ({
                record,
                editing: col.editing,
                dataIndex: col.dataIndex,
                index,
                title: col.title,
            }),
        };
    });

表格多选，并与其他表格互斥，并动态设置不可选

const rowSelection = {
        selectedRowKeys: checkoutKey,
        onChange: (selectedRowKeys: string[]) => {
            setCheckoutKey(selectedRowKeys);
        },
        getCheckboxProps: (record: any) => ({
            disabled: checkoutOutKey.indexOf(record.key) > -1,    // 配置无法勾选的列
        }),
    };