可编辑行表格在需求中很常见，但antd文档里面的没有很好适用的所以分享一个自己工作时用的

主要是columns部分

    const columns = [
        {
            title: "橘子", //项目名称
            dataIndex: "target",
            key: "target",
            align: "center",
        },
        {
            title: "苹果", //项目单位
            dataIndex: "targetUnit",
            key: "targetUnit",
            align: "center",
        },
        {
            title: "香蕉",
            dataIndex: "planValue",
            key: "january",
            align: "center",
            render: (text, record) => {
                if (record.key == editIndex && editType == 'planValue') {
                    return <InputNumber style={{width:'40%'}} value={text} onChange={(e) => changeInputSave(e, record)} />
                } else {
                    return <div onMouseEnter={() => edit(record, 'planValue')}>{text}</div>
                }
            }
        },
    ]

    /**
     * 获取修改表格单元格的字段
     * @param record 
     */
    const edit = (record, type) => {
        setEditIndex(record.key);//存储key值
        setEditType(type);//存储对应的字段名
    };

    /**
    * 修改单元格数据
    * @param record 
    * @param e
    */
    const changeInputSave = (e, record) => {
        if (!e) {
            return
        }
        record[editType] = e
        for (let i in dataSource) {
            if (dataSource[i].key === record.key) {
                dataSource[i] = record
            }
        }
        setDataSource(dataSource)
    };