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

最近写了一个小东西，模仿自己原先用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> */} <a onClick={()=>showModal(record)} > 删除</a> </label> ), }, ]; 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 ( <label> <Row gutter={16} className="gutter-row"> <Col md={24}> <Card title="基本表格+简单弹框" bordered={false}> <Table columns={columns} dataSource={data} /> </Card> </Col> </Row> {isModalVisible && <ModalData close={()=>{ handleCancel() }} saveOk={(form,data)=>{ handleOk(form,data) }}/>} {/* {isModalVisible && <ModalData />} */} </label> ); }; const la = '111' export default () => ( <App/> )

Table/model/index.js

import React from 'react' import Basic from './modules/base' import EditTableData from './modules/editTableData' import { Modal, Tabs, Spin } from "antd"; export default class ModalData extends React.Component{ constructor(){ super() this.state = { isModalVisible:true, currentTab:'basicColumns', tableData:[] } } componentWillMount(){ this.setState({ isModalVisible:this.props.isModalVisible }) this.basicColumns = [ {title:'操作类型',editable:true,dataIndex:'name'}, {title:'名称',editable:true,dataIndex:'age'}, {title:'描述',editable:true,dataIndex:'address'} ] this.associationColumns = [ {title:'前置操作',editable:true,dataIndex:'name'}, {title:'关联权限',editable:true,dataIndex:'age'}, {title:'关联操作',editable:true,dataIndex:'address'} ] this.dataViewColumns = [ {title:'字段',editable:true,dataIndex:'name'}, {title:'描述',editable:true,dataIndex:'address'} ] } componentWillUpdate(){ console.log(22) } componentDidMount(){ console.log(11) } handleOk = () => { // console.log(this.tabData,'this.formRefThree.props') const form = this.formRef.props.form; form.validateFields((err, fieldsValue) => { if (!err) { console.log(this.tabData,'pp---00---'); this.props.saveOk(fieldsValue,this.tabData) } }); } saveTable(data){ console.log(data,this.state.currentTab,'data---') this.tabData = { [this.state.currentTab]:data } } changeTab(key){ console.log(key,'key---') this.setState({ currentTab:key }) } render(){ return ( <Modal title="编辑" width={650} destroyOnClose visible onOk={ () => this.handleOk() } onCancel={ () => this.props.close()} > <Tabs onChange={(key)=>this.changeTab(key)} > <Tabs.TabPane tab="基本信息" key="basicColumns"> <span> <Basic wrappedComponentRef={(form) => this.formRef = form}/> <EditTableData basicColumns={this.basicColumns} saveTable={(data)=>this.saveTable(data)}/> </span> </Tabs.TabPane> <Tabs.TabPane tab="关联权限" key="associationColumns"> <EditTableData associationColumns={this.associationColumns} saveTable={(data)=>this.saveTable(data)}/> </Tabs.TabPane> <Tabs.TabPane tab="数据视图" key="dataViewColumns"> <EditTableData dataViewColumns={this.dataViewColumns} saveTable={(data)=>this.saveTable(data)}/> </Tabs.TabPane> </Tabs> </Modal> ) } }

Table/model/modules/base.js