react+antd實(shí)現(xiàn)動(dòng)態(tài)編輯表格數(shù)據(jù)

更新時(shí)間：2022年08月23日 15:51:54 作者：追逐驀然

這篇文章主要為大家詳細(xì)介紹了react+antd實(shí)現(xiàn)動(dòng)態(tài)編輯表格數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了react+antd動(dòng)態(tài)編輯表格數(shù)據(jù)的具體代碼，供大家參考，具體內(nèi)容如下

在項(xiàng)目中，我們會(huì)遇到一種需求，為用戶提供一份表格去編輯，而且表格中各個(gè)單元格是相關(guān)影響的，因此在一個(gè)單元格中編輯過會(huì)影響另外一個(gè)單元格。

小需求

在一個(gè)表格中：

1.有兩行數(shù)據(jù)，一行是數(shù)據(jù)1，一行是數(shù)據(jù)2；
2.而且只能數(shù)據(jù)1的單元格可以進(jìn)行編輯;
3.只能輸入數(shù)字，要是輸入其他的，則顯示編輯之前的數(shù)值
4. 當(dāng)數(shù)據(jù)1的那行數(shù)據(jù)發(fā)生改變的時(shí)候，數(shù)據(jù)2對(duì)應(yīng)的單元格的數(shù)據(jù)也會(huì)自動(dòng)加1

例子圖片

示例代碼

import React, { useState } from 'react';
import {Table, Typography, message} from 'antd'
const { Paragraph } = Typography;
function Index(props){

? // 判斷是否時(shí)數(shù)字
? function isNumber(val){
? ? ? var regPos = /^\d+(\.\d+)?$/; //非負(fù)浮點(diǎn)數(shù)
? ? ? var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //負(fù)浮點(diǎn)數(shù)
? ? ? if(regPos.test(val) || regNeg.test(val)){
? ? ? ? ? return true;
? ? ? }else{
? ? ? ? ? return false;
? ? ? }
? }
? // 表格數(shù)據(jù)源
? const [ data , setData ] = useState([
? ? {
? ? ? 'num1':1
? ? },
? ? {
? ? ? 'num1':2
? ? },
? ? {
? ? ? 'num1':3
? ? },
? ? {
? ? ? 'num1':4
? ? },
? ? {
? ? ? 'num1':5
? ? }
? ])
? // 定義表頭
? const columns = [
? ? {
? ? ? title: '數(shù)據(jù)1',
? ? ? dataIndex: 'num1',
? ? ? key: 'num1',
? ? ? render: (text, record, index) => (
? ? ? ? ? <Paragraph editable={{onChange:(value)=>{
? ? ? ? ? ? let date = 0
? ? ? ? ? ? // 這里是:只能輸入數(shù)字，要是輸入其他的值，則提示并且顯示編輯之前的值
? ? ? ? ? ? if(isNumber(value)){
? ? ? ? ? ? ? ? date = value
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? if(value != ''){
? ? ? ? ? ? ? ? ? ? message.warn('只能輸入數(shù)字')
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? date = data[index]['num1']
? ? ? ? ? ? }
? ? ? ? ? ? // 處理表格中的值，使得動(dòng)態(tài)更新表格中的值
? ? ? ? ? ? let obj = [...data]
? ? ? ? ? ? setData([])
? ? ? ? ? ? obj[index]['num1'] = parseInt(date)
? ? ? ? ? ? setData(obj)
? ? ? ? ? }}} value={text}>{text}</Paragraph>
? ? ? ),
? ? },
? ? {
? ? ? title: '數(shù)據(jù)2',
? ? ? dataIndex: 'num2',
? ? ? key: 'num2',
? ? ? render: (text, record, index) => (
? ? ? ? ? <span>{record['num1'] + 1}</span>
? ? ? ),
? ? },
? ]


? return (
? ? <div>
? ? ? ? <Table dataSource={data} columns={columns} />
? ? </div>
? )

}

export default Index