最近写了一个小东西，模仿自己原先用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" /> {} <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) }}/>} {} </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

import React from 'react'import { Form, Input, Select, Radio } from 'antd';const { Option } = Select;// const Basic = (props) => {class Basic extends React.Component{ formRef = React.createRef(); // const [form] = Form.useForm(); onGenderChange(value){ switch (value) { case 'male': this.props.form.setFieldsValue({ note: 'Hi, man!', }); return; case 'female': this.props.form.setFieldsValue({ note: 'Hi, lady!', }); return; case 'other': this.props.form.setFieldsValue({ note: 'Hi there!', }); return; } } onFinish(values){ console.log(values); console.log(this.props.form.getFieldsValue,'09900--') } render(){ console.log(this.props.form.getFieldValue('gender'),'990----') const { form } = this.props; const { getFieldDecorator, getFieldValue} = form; return ( <div> <Form ref={this.formRef} layout="inline" name="control-hooks" onFinish={this.onFinish.bind(this)}> <Form.Item label="权限标识" required> {getFieldDecorator("note")(<Input placeholder="请输入"/>)} </Form.Item> <Form.Item label="权限名称" required> {getFieldDecorator("name")(<Input placeholder="请输入"/>)} </Form.Item> <Form.Item label="requiredMark" name="状态" required> {getFieldDecorator("requiredMark")( <Radio.Group> <Radio.Button value="optional">启用</Radio.Button> <Radio.Button value="disabled">禁用</Radio.Button> </Radio.Group> )} </Form.Item> <Form.Item name="gender" label="分类" required> {getFieldDecorator("gender")( <Select style={{width: '250px'}} placeholder="请选择" onChange={this.onGenderChange.bind(this)} allowClear > <Option value="male">api借口</Option> <Option value="female">租户</Option> <Option value="other">系统</Option> </Select> )} </Form.Item> {getFieldValue('gender') == 'other' && <Form.Item name="customizeGender" label="备注"> {getFieldDecorator("customizeGender")(<Input />)} </Form.Item>} </Form> </div> ) }}export default Form.create()(Basic)

Table/model/modules/editTable.js

import React, { useState } from 'react';import { Table, Input, InputNumber,Divider, Popconfirm, Form, Typography } from 'antd';import {PlusSquareOutlined} from '@ant-design/icons';const { Provider, Consumer } = React.createContext()//组件之间传值const originData = [];for (let i = 0; i < 5; i++) { originData.push({ key: i.toString(), name: `Edrward ${i}`, age: 32, address: `London Park no. ${i}`, });}class EditableCell extends React.Component{ renderCell = ({getFieldDecorator}) => { const { editing, dataIndex, title, Inputs, record, index, children, ...restProps } = this.props return ( <td {...restProps}> {editing ? ( <Form.Item style={{ margin: 0, }} > {getFieldDecorator(dataIndex,{ rules: [{ required: true, message: '请输入' }], initialValue: record[dataIndex] })( <Inputs /> )} </Form.Item> ) : ( children )} </td> ); } render(){ return <Consumer>{this.renderCell}</Consumer> }}class EditTableData extends React.Component{ constructor(props){ super(props) this.state = { data:originData, editingKey:'' } } // 判断是否可编辑 isEditing = record => record.key == this.state.editingKey // 初始化 init(){ console.log(this.props,'pp--') const data = this.props.basicColumns || this.props.dataViewColumns || this.props.associationColumns || [] this.columns = [ ...data, { title: ()=>{ return <span>操作<Divider type="vertical" /><PlusSquareOutlined style={{color:"#333"}} onClick={()=>this.addColumns()}/></span> }, width:'20%', dataIndex: 'operation', render: (_, record) => { const { editingKey } = this.state const editable = this.isEditing(record); return editable ? ( <span> <Consumer> { form => ( <a onClick={() => this.save(form,record.key)} > 保存 </a>) } </Consumer> <Divider type="vertical" /> <Popconfirm okText="确认" cancelText="取消" title="是否确定取消?" onConfirm={this.cancel}> <a>取消</a> </Popconfirm> </span> ) : ( <span> <a disabled={editingKey != ''} onClick={()=>this.edit(record.key)}>编辑</a> <Divider type="vertical" /> <Popconfirm okText="确认" cancelText="取消" title="是否确定取消?" onConfirm={()=>this.delete(record.key)}> <a>删除</a> </Popconfirm> </span> ); }, }, ]; } // 添加 addColumns = () => { const newData = [...this.state.data] newData.push({ key: newData.length, name: ``, age: '', address: `` }) this.setState({ data:newData }) } // 编辑 edit = (key) => { this.setState({ editingKey:key }) } // 删除 delete = (key) => { const newData = [...this.state.data] const index = newData.findIndex(item=>item.key == key) newData.splice(index,1) this.setState({ data:newData }) } // 保存 save = (form,key) => { form.validateFields((error,row)=>{ if(error){ return } const newData = [...this.state.data] const index = newData.findIndex(item=>item.key == key) if(index > -1){ const item = newData[index] newData.splice(index,1,{ ...item,...row }) } this.setState({ editingKey:'', data:newData }) this.props.saveTable(newData) }) } // 取消 cancel = () => { this.setState({ editingKey: '' }) } render(){ this.init() console.log(this.columns,'columns') const columns = this.columns.map(col => { if(!col.editable){ return col } return { ...col, onCell:record => ({ record, Inputs:Input, dataIndex:col.dataIndex, title:col.title, editing:this.isEditing(record) }) } }) return ( <Provider value={this.props.form}> <Table bordered style={{marginTop:'30px'}} components={{ body:{ cell:EditableCell } }} columns={columns} dataSource={this.state.data} pagination={false}/> </Provider> ) }}export default Form.create()(EditTableData)

以上就是React+Antd实现可增删改表格的示例的详细内容，更多关于React+Antd实现可增删改表格的资料请关注其它相关文章！