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

最新推荐文章于 2024-08-07 09:26:20 发布

前端歌谣

最新推荐文章于 2024-08-07 09:26:20 发布

阅读量355

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_41632427/article/details/127616739

版权

前端记录-work-react-最近工作专栏收录该内容

212 篇文章 3 订阅

订阅专栏

这段代码展示了在React中创建一个可编辑的表格单元格组件。组件根据dataIndex动态生成输入框（Input）或数字输入框（InputNumber），并支持选择操作，如选择尺寸（SizeId）或颜色。当处于编辑状态时，该组件会包裹在一个Form.Item中进行必填验证。同时，提供了尺寸和颜色的下拉选项，分别从sizeList和styleList中获取。

摘要由CSDN通过智能技术生成

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>
        );
    };