前端项目实战185-ant design table实现编辑单元格的功能

const EditableCell = ({
        editing,
        dataIndex,
        title,
        inputType,
        record,
        index,
        children,
        ...restProps
    }: {
        editing: any,
        dataIndex: any,
        title: any,
        inputType: any,
        record: any,
        index: any,
        children: any
    }) => {
        const inputNode = inputType === 'input' ?
            <Input style={{ width: "300px" }} autoComplete="off" /> :
            <InputNumber min={1} style={{ width: "300px" }} autoComplete="off" />
        const selectNode = dataIndex == 'sizeId' ? <Select
            style={{ width: "300px" }}
            placeholder="请选择尺寸"
            optionFilterProp="children"
        >
            {sizeList && sizeList.map((item: any, index: number) => (
                <Option value={item.id} key={index}>{item.name}</Option>
            ))}
        </Select> : <Select
            style={{ width: "300px" }}
            placeholder="请选择颜色"
            optionFilterProp="children"
        >
            {styleList && styleList.map((item: any, index: number) => (
                <Option value={item.id} key={index}>{item.name}</Option>
            ))}
        </Select>
        return (
            <td {...restProps}>
                {editing ? (
                    <Form.Item
                        name={dataIndex}
                        style={{
                            margin: 0
                        }}
                        rules={[
                            {
                                required: true,
                                message: `请输入${title}!`
                            }
                        ]}
                    >
                        {inputType == 'select' ? selectNode : inputNode}
                    </Form.Item>
                ) : (
                    children
                )}
            </td>
        );
    };