【React工作记录七十九】React+hook+ts+ant design封装一个具有动态表格得页面

前言

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

需求分析

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

功能思维

在这里插入图片描述

首先需要通过数组遍历

 {
   data && data.map((item, index) => (
          
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
好的,我可以帮您解答这个问题。基于Ant Design React,您可以使用Table组件来实现一个可动态添加和编辑表格内容的表格。 首先,您需要在代码中引入Table组件: ``` import { Table } from 'antd'; ``` 然后,您需要定义表格的列和数据源。您可以将这些数据定义为组件的state,以便在添加和编辑表格内容时进行更新。例如: ``` state = { columns: [ { title: '姓名', dataIndex: 'name', key: 'name', }, { title: '年龄', dataIndex: 'age', key: 'age', }, { title: '地址', dataIndex: 'address', key: 'address', }, ], data: [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', }, ], }; ``` 接下来,您需要在render方法中使用Table组件来渲染表格,并将列和数据源传递给它。例如: ``` <Table columns={this.state.columns} dataSource={this.state.data} /> ``` 现在,您可以使用Ant Design的Form组件来实现添加和编辑表格内容的功能。您可以为表格添加一个“添加”按钮,单击该按钮可以弹出一个包含表单的模态框。用户可以在表单中输入新的行数据,然后单击“确定”按钮将新的行添加到表格中。 您还可以为表格的每一行添加一个“编辑”按钮。单击该按钮可以弹出一个包含表单的模态框,并自动填充该行的数据。用户可以在表单中编辑行数据,然后单击“确定”按钮将更新后的行数据保存到表格中。 最后,为了实现可动态添加表格内容的功能,您需要在“添加”按钮单击事件中更新数据源state。例如: ``` handleAdd = () => { const { data } = this.state; const newData = { key: data.length + 1, name: `Edward King ${data.length + 1}`, age: 32, address: `London, Park Lane no. ${data.length + 1}`, }; this.setState({ data: [...data, newData], }); }; ``` 这样,您就可以实现一个基于Ant Design React的可动态添加和编辑表格内容的表格了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端大歌谣

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值