React使用antd实现可编辑单元格

import React, { useContext, useState, useEffect, useRef } from 'react';
import { Input, Form, } from 'antd';
import Table from '@com/Table';
import 'antd/dist/antd.css';
import '../styles/search.less';
// 
import '../styles/edittables.less'

/**
 * 只适用于 单个单元格修改
 * 必传字段 ：
 *       columns:[],
 *       dataSource:[]
 * 必传方法
 *      saveFun  用于改变input输入值之后触发的回调函数
 */

const EditableContext = React.createContext(null);

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

const EditableCell = ({
    title,
    editable,
    children,
    dataIndex,
    record,
    saveFun,
    ...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();
            // 返回当前行信息  包括更改后的信息
            saveFun({ ...record, ...values })
        } catch (errInfo) {
            console.log('Save failed:', errInfo);
        }
    };

    let childNode = children;
	//判断是否可编辑
    if (editable) {
        childNode = editing ? (
            <Form.Item
                style={{
                    margin: 0,
                    lineHeight: "27px"
                }}
                name={dataIndex}
                rules={[
                    {
                        required: true,
                        message: `${title} is required.`,
                    },
                ]}
            >
                <Input ref={inputRef} style={{ height: "22px", borderRadius: "4px" }} onPressEnter={save} onBlur={save} />
            </Form.Item>
        ) : (
                <div
                    className="editable-cell-value-wrap"
                    style={{
                        paddingRight: 24,
                    }}
                    onClick={toggleEdit}
                >
                    {children}
                </div>
            );
    }

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

class EditableTable extends React.Component {
    static defaultProps = {
        columns: [],
        dataSource: []
    }
    render() {
        const { dataSource,columns,saveFun, ...rest } = this.props;
        // 每一行 每一个单元格 
        const components = {
            body: {
                row: EditableRow,
                cell: EditableCell,
            },
        };
        const newColumns = columns.map((col) => {
            if (!col.editable) {
                return col;
            }
            return {
                ...col,
                onCell: (record) => ({
                    record,
                    editable: col.editable,
                    dataIndex: col.dataIndex,
                    title: col.title,
                    saveFun: saveFun
                }),
            };
        });
        return (
            <div>
                <Table
                    {...rest}
                    components={components}
                    rowClassName={() => 'editable-row'}
                    dataSource={dataSource}
                    columns={newColumns}
                />
            </div>
        );
    }
}

export default EditableTable

使用：

<EditTable
     bordered={false}
     size={'default'}
     columns={columns} //表格的列
     dataSource={dataTable} //表格渲染的数据
     title={tableName} //表格的名字
     pagination={false}
     saveFun={this.saveFun}
/>

columns：

 columns: [
                {
                    title: () => '序号(可编辑)',
                    dataIndex: 'priority',
                    width: '10%',
                    key: 'priority',
                    editable: true,
                },
                {
                    title: () => 'xx',
                    dataIndex: 'generate',
                    key: 'generate'
                },
                {
                    title: () => 'xx',
                    dataIndex: 'ttl',
                    key: 'ttl'
                },
                {
                    title: () => 'xx',
                    dataIndex: 'type',
                    key: 'type'
                },
                {
                    title: () => 'xx',
                    dataIndex: 'value',
                    key: 'value'
                },
                ]

editable属性为true的时候表示当前单元格可编辑；saveFun为该单元格离开焦点或者回车之后出发的回调函数。

saveFun：

saveFun=(item)=>{
      // item为当前行 的所有属性
    }

参考antd官方可编辑单元格：https://ant.design/components/table-cn/#components-table-demo-edit-cell

其实上边98%的代码都是固定写法，ctrl C V 即可实现…