react+antd table动态生成且点击编辑按钮可对行内数据编辑

实现table字段动态生成且可对行内数据根据不同数据类型进行编辑，效果如下：

代码如下：

	dataSource: [{ '111': '21331', '222': 'sad', '333': '000', '444': 'ashdiudh' },
            { '111': '21331', '222': 'sad', '333': '000', '444': 'ashdiudh' }],
		let first = [{
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            width: 40,
            render: (_, text, record, index) => {
                return (this.state.page - 1) * this.state.size + record + 1 //根据分页生成序号
            }
        }]
     
        let data = [{//需动态获取的字段
            title: '字段1',
            dataIndex: '111',
            key: '111',
            type: 1,//type：编辑时数据输入类型，本代码内type为1显示输入框，2显示输入框
        },
        {
            title: '字段2',
            dataIndex: '222',
            key: '222',
            type: 2,
        }, {
            title: '字段3',
            dataIndex: '333',
            key: '333',
            type: 1,
        },
        {
            title: '字段4',
            dataIndex: '444',
            key: '444',
            type: 2,
        }]
        let list = data.map((item, index) => {
            console.log(item);
            let obj = item
            obj.width = 124
            obj.render = (_, record, index) => (
                <Space size="middle">//index和选中行index一致时可进行编辑
                    {index == this.state.currentRecord.index ? item.type == 2 ? <Select
                        allowClear
                        showSearch
                        placeholder="请选择标签名称"
                    >
                        <Option key={1} value={1}>...</Option>
                      	...
                    </Select> : <Input /> : record[item.dataIndex]}
                </Space>
            )
            return obj
        })
        let operation = [{
            title: '操作',
            dataIndex: 'operation',
            key: 'operation',
            width: 230,
            render: (_, record, index) => (
                <Space size="middle">
                    {index == this.state.currentRecord.index ? <a onClick={() => {
                        console.log(record);
                        record.index = index
                        this.setState({
                            currentRecord: record,
                        })
                    }}>保存</a> : ''}
                    {index == this.state.currentRecord.index ? <a onClick={() => {

                        this.setState({
                            currentRecord: {},
                        })
                    }}>取消</a> : ''}
                    {index == this.state.currentRecord.index ? '' : <a onClick={() => {
                        console.log(record);
                        record.index = index
                        this.setState({
                            currentRecord: record,
                        })
                    }}>编辑</a>}
                    {index == this.state.currentRecord.index ? '' : <a onClick={() => {
                        console.log(record);
                        record.index = index
                        this.setState({
                            currentRecord: record,
                        })
                    }}>确认</a>}
                    {index == this.state.currentRecord.index ? '' : <a onClick={() => this.setState({
                        currentRecord: record,
                        delTagModal: true
                    })} style={{ color: '#FF0000' }}>删除</a>}
                </Space>
            ),
        }]
        let columns = [...first, ...list, ...operation]//拼接table的columns

	<Table dataSource={this.state.dataSource} columns={columns} pagination={pagination}/>