react+antd实现动态编辑表格数据
本文实例为大家分享了react+antd动态编辑表格数据的具体代码，供大家参考，具体内容如下
在项目中，我们会遇到一种需求，为用户提供一份表格去编辑，而且表格中各个单元格是相关影响的，因此在一个单元格中编辑过会影响另外一个单元格。
小需求
在一个表格中：
1.有两行数据，一行是数据1，一行是数据2；
2.而且只能数据1的单元格可以进行编辑;
3.只能输入数字，要是输入其他的，则显示编辑之前的数值
4. 当数据1的那行数据发生改变的时候，数据2对应的单元格的数据也会自动加1
例子图片
文章图片
示例代码
import React, { useState } from 'react'; import {Table, Typography, message} from 'antd'const { Paragraph } = Typography; function Index(props){// 判断是否时数字function isNumber(val){var regPos = /^\d+(\.\d+)?$/; //非负浮点数var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数if(regPos.test(val) || regNeg.test(val)){return true; }else{return false; }}// 表格数据源const [ data , setData ] = useState([{'num1':1},{'num1':2},{'num1':3},{'num1':4},{'num1':5}])// 定义表头const columns = [{title: '数据1',dataIndex: 'num1',key: 'num1',render: (text, record, index) => ({let date = 0// 这里是:只能输入数字，要是输入其他的值，则提示并且显示编辑之前的值if(isNumber(value)){date = value}else{if(value != ''){message.warn('只能输入数字')}date = data[index]['num1']}// 处理表格中的值，使得动态更新表格中的值let obj = [...data]setData([])obj[index]['num1'] = parseInt(date)setData(obj)}}} value=https://www.it610.com/article/{text}>{text}),},{title: '数据2',dataIndex: 'num2',key: 'num2',render: (text, record, index) => ({record['num1'] + 1}),},]return ()}export default Index
总结
这篇博文就简单的分享到这里，这里只是一个基础。学会了这个还可以根据这个属性造很多自己的轮子。
【react+antd实现动态编辑表格数据】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
推荐阅读
- Android中关于定时任务实现关闭订单问题
- Vue中tab栏切换的简单实现
- 微信小程序全屏滚动字幕的实现方法详解
- App|App Deploy as Code! SAE & Terraform 实现 IaC 式部署应用
- 机器学习|机器学习之EM算法的原理及推导(三硬币模型)及Python实现
- Opencv实现倾斜图片转正示例
- Vue.extend实现组件库message组件示例详解
- Python|Python venv虚拟环境跨设备迁移的实现
- Spring|Spring Boot实现功能的统一详解
- Vue项目如何实现rsa加密