React+Antd 实现可增删改表格的示例

最近写了一个小东西，模仿自己原先用vue写的项目改成react语法。写了一个可编辑的表格，期间磕磕碰碰的，打算把bug记录下。先把效果图和代码贴上去，主要用的是react+antd

table表格，点击编辑，打开弹窗，弹窗内是tab切换显示不同的form表单+可编辑表格，表格内操作栏"+"，表格内新增一行可编辑的数据，编辑，保存，删除这些操作就不细说也不贴效果图了

React+Antd 实现可增删改表格的示例_第1张图片

React+Antd 实现可增删改表格的示例_第2张图片

React+Antd 实现可增删改表格的示例_第3张图片

React+Antd 实现可增删改表格的示例_第4张图片

React+Antd 实现可增删改表格的示例_第5张图片

Table/index.js

import React, { useState }from 'react'
import { Row,Col,Card, Table, Tag, Divider, Modal, Button } from 'antd';
import ModalData from './model'


const App = (props) => {
 console.log(props,'----')
 const [isModalVisible, setIsModalVisible] = useState(false);
 const columns = [
  {
   title: 'Name',
   dataIndex: 'name',
   key: 'name',
   render: text => {text},
  },
  {
   title: 'Age',
   dataIndex: 'age',
   key: 'age',
  },
  {
   title: 'Address',
   dataIndex: 'address',
   key: 'address',
  },
  {
   title: 'Tags',
   key: 'tags',
   dataIndex: 'tags',
   render: tags => (
    
   ),
  },
  {
   title: 'Action',
   key: 'action',
   align:'center',
   render: (record) => (
    
   ),
  },
 ];
 const data = [
  {
   key: '1',
   name: 'John Brown',
   age: 32,
   address: 'New York No. 1 Lake Park',
   tags: ['nice', 'developer'],
  },
  {
   key: '2',
   name: 'Jim Green',
   age: 42,
   address: 'London No. 1 Lake Park',
   tags: ['loser'],
  },
  {
   key: '3',
   name: 'Joe Black',
   age: 32,
   address: 'Sidney No. 1 Lake Park',
   tags: ['cool', 'teacher'],
  }
 ];
 
 const showModal = (row) => {
  setIsModalVisible(true);
 };
 const handleCancel = () => {
  setIsModalVisible(false);
 }
 const handleOk = (form={},data) => {
  setIsModalVisible(false);
  console.log(form,data,'pp---')
 }

 

 return (