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

Posted 2022-10-12

前言

我是歌谣 我有个兄弟 巅峰的时候排名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()

总结

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