React+hook+ts+ant design封装一个具有动态表格得页面

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣

需求分析

在前端项目中 最常见得是可以增加多个表格数据得一个表单

功能思维

首先需要通过数组遍历

{data && data.map((item, index) => (
                        <Row style={{ marginTop: "20px" }} gutter={24}>
                            <Col span={4}>
                                <Form.Item
                                    key={index}
                                    labelCol={{ span: 13 }}
                                    wrapperCol={{ span: 8, offset: 1 }}
                                    label="缸数/匹号"
                                    name={`batchCode-${index}`}
                                    rules={[{ required: true, message: '请输入缸数/匹号' }]}
                                >
                                    <Input />
                                </Form.Item>
                            </Col>

此处通过数组遍历得方法分配索引

索引处理成为数组对象

此时需要把所在得索引变成数组对象

//数组对象自己转换为数组
export function myFunc(obj: any) {
    const newObj: any = {}
    for (const [key, value] of Object.entries(obj)) {
        const strList = key.split('-')
        const groupId = strList.pop() // 拿到最后一个"-"之后的字符
        const keyName = strList.join('') // 最后一个"-"之前的所有字符再加起来(理论上如果只有一个"-"可以直接key.split('-')[0]和key.split('-')[1])
        if (!newObj[groupId as string]) {
            newObj[groupId as string] = {}
        }
        newObj[groupId as string][keyName] = value
    }
    return Object.values(newObj)
}

这一部分就可以讲数组对象转换为数组

记住要设置一个number进行+1操作

const handleAdd = () => {
        const newData = data;
        newData.push({ index: number });
        console.log(newData, "newData")
        setNumber(number + 1)
        setData(newData)
    }

删除

const handleRemove = (index: number) => {
        console.log(index)
        const newData = data.splice(1, index)
        console.log(newData, "newData")
        setData(newData)
    }

获取值

const res = await form.validateFields()

总结

我是歌谣 放弃很容易 坚持一定很酷 关注前端小歌谣带你进入前端巅峰交流群