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

已于 2023-03-06 09:57:06 修改
阅读量215 收藏
点赞数
分类专栏： 前端项目工作实战 文章标签： react.js javascript 前端
于 2022-10-11 18:37:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/geyaoisnice/article/details/127269176
版权

前言

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

需求分析

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

功能思维

在这里插入图片描述

首先需要通过数组遍历

 {
   data && data.map((item, index) => (
了解本专栏 订阅专栏 解锁全文 超级会员免费看
前端大歌谣
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
【React工作记录七十八】React+hook+ts+ant design封装一个table的组件
geyaoisnice的博客
09-29 726
React+hook+ts+ant design封装一个table的组件
React，Antd二次封装动态Table组件【一】
读心悦
12-12 939
React版本为：18.2.0antd版本为：5.0.5Antd的Table组件本身就已经实现了ad来那个数据展示，可以对数据进行排序、搜索、分页、自定义等等操作。那么我们会根据自己项目的场景来进行二次封装。
react+ts+hook封装一个table分页组件(建议收藏,直接使用)
qq_41632427的博客
03-03 756
前端
【React工作记录八十二】react+ts+hook封装一个table分页组件(建议收藏,直接使用)
geyaoisnice的博客
02-27 333
react+ts+hook封装一个table分页组件(建议收藏,直接使用)
react 封装表格组件_react 封装通用组件之table组件
weixin_39671964的博客
12-21 1493
react 封装通用组件之table组件工作中发现我们在做react后台管理系统的时候，会有大量重复的页面(如下图)，比如form表单和table组件、以及接口通讯，新增修改modal等。虽然antd里面的组件已经很简便了，但是遇到众多功能类似的页面，每次都复制大量的代码还是会耗费很大的时间而且不易维护，看起来很不清爽，于是找了个时间就把他们做了二次封装。 尽量涵盖了大多数的业务。table表格的...
react + ts or vue + ts 通用axios封装的方法。
07-21
本篇文章将深入探讨如何在React+TS或Vue+TS项目中对axios进行通用封装，以便更好地管理API请求。 首先，我们了解下什么是axios。Axios是一个基于Promise的HTTP库，它可以在浏览器和node.js中使用。它具有丰富的特性...
React+TS+RTK+Ant Design+ESLint+Git Lint + Stylelint 项目构建企业级模板
08-01
React+TS+Redux Tool Kit+Ant Design+ESLint+Git Lint + Stylelint 项目构建企业级模板，具体参考https://gitee.com/zhang_huai_wei/zhw-blog-pc || React+TS+Redux Tool Kit+Ant Design+ESLint+Git Lint + ...
react-ant-admin：使用ant-design react react-hook ts开发的类ant-design-pro管理后台，具有完整的权限系统和配套的node + ts的api
02-05
最开始的时候，我需要一个react开发的amdin模版，在开源社区寻找了一边之后，比较中意ant design pro的UI ，当我一堆操作把ant desgin pro desgin ant desgin pro的代码拉下来研究之后，发现内容是在太多了，除了...
React+webpack+redux+ant design+axios+less全家桶后台管理框架.zip
06-12
React+webpack+redux+ant design+axios+less 这个组合是现代前端开发中的常见技术栈，用于构建高效、可维护的后台管理框架。以下是对这些技术及其在项目中的应用的详细说明： **React.js** React是Facebook开发的一...
react PC端项目构建TS，react@18.2.0+antd+vite+axios+redux+sass+ts
03-07
该架构已解决大部分坑，主要用于react@18.2.0PC端，在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、antd、sass、vite、sass、react V18，其中还会介绍到如何跨页面传递数据、...
antd react Table组件封装（含分页）
有没有认真工作的博客
12-18 824
2. 父组件调用示例。
react 封装表格组件_基于 Antd Protable 及 ahooks 的表格组件业务封装 React hooks
weixin_39545329的博客
12-21 966
Protable 业务封装基于 Antd Protable 及 ahooks 的表格组件业务封装Protable：https://procomponents.ant.design/components/tableahooks：https://ahooks.js.org/zh-CN/hooks/async取消 request 属性，增加 url、moreLoading 字段。url： 为接口 url...
React之antdesign官网虚拟列表（Table组件）二次封装
仙途路漫漫其修远兮
09-22 4925
添加功能有： （1） 全选与单选功能 （2）滚动加载功能（虚拟列表级滚动加载） （3）定位某一行 （4）表格字体闪烁功能 （5）可对表头进行隐藏或显示配置，表格内部内容进行宽度适配 （6）高度设置（这块可能得靠你自己再去深度研究一下这块了）
Concis组件库封装——Table表格
量子前端的博客
06-11 1451
React-View-UI表格组件提供了展开行、单选、多选、排序以及对大数据的处理方案，有虚拟列表、懒加载、分页，官方文档如下： 所提供的API能力如下： 虚拟列表主要使用了固定列高（15条数据 * 每条高度）+ 总列高（总数据 * 每条高度），在总高度滚动时根据滚动值不断改变显示的数据，而不改变DOM。 懒加载则是滚到底了，继续加载一部分数据。 分页比较常规，就不说了。具体源码如下： React-View-UI组件库线上链接：http://react-view-ui.com:92/#/common/
React+hook+ts+ant design封装一个table的组件
qq_41632427的博客
10-14 845
前端
vue3 + antd 封装动态表单组件（三）
guizi0809的博客
01-29 1333
手把手教如何封装动态表单组件
初识Vue笔记
humorious的博客
10-22 204
Vue.js Vue.js初体验 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body>
react+ts+antd 表单的二次封装
qq_40425411的博客
07-06 2028
在系统管理项目中，多次出现表单的提交，现将表单进行简单的一些二次封装，将表现层和数据层分离，只需要传入数据进行。循环数据类型生成对应表单。 父组件 //仿造数据 const getCaseTypeList = () =>{ getCaseType().then(res => { if (res.status === 200) { const data = [{orderId:'0',orderName:'全部'},{orderId:'1',orde
react组件通信方式
最新发布
qq_47040462的博客
07-24 293
【代码】react组件通信方式。
基于Ant Design react封装一个可动态添加表格，并附带编辑表格类容的表格
06-10
好的，我可以帮您解答这个问题。基于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、付费专栏及课程。

余额充值