React+Antd 实现可增删改表格的示例
编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要介绍了React+Antd实现可增删改表格的示例，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下
最近写了一个小东西，模仿自己原先用vue写的项目改成react语法。写了一个可编辑的表格，期间磕磕碰碰的，打算把bug记录下。先把效果图和代码贴上去，主要用的是react+antd
table表格，点击编辑，打开弹窗，弹窗内是tab切换显示不同的form表单+可编辑表格，表格内操作栏"+"，表格内新增一行可编辑的数据，编辑，保存，删除这些操作就不细说也不贴效果图了
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 => <a>{text}</a>,
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
{
title: 'Tags',
key: 'tags',
dataIndex: 'tags',
render: tags => (
<label>
{tags.map(tag => {
let color = tag.length > 5 ? 'geekblue' : 'green';
if (tag === 'loser') {
color = 'volcano';
}
return (
<Tag color={color} key={tag}>
{tag.toUpperCase()}
</Tag>
);
})}
</label>
),
},
{
title: 'Action',
key: 'action',
align:'center',
render: (record) => (
<label>
<a onClick={() => showModal(record)}>编辑</a>
<Divider type="vertical" />
{/* <Button onClick={()=>showModal(record)} > 删除</Button> *