最近写了一个小东西，模仿自己原先用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 => {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 (
);
};
const la = '111'
export default () => (
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 (
this.handleOk() }
onCancel={ () => this.props.close()}
>
this.changeTab(key)} >
this.formRef = form}/>
this.saveTable(data)}/>
this.saveTable(data)}/>
this.saveTable(data)}/>
)
}
}
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 (
)
}
}
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 (
{editing ? (
{getFieldDecorator(dataIndex,{
rules: [{
required: true,
message: '请输入'
}],
initialValue: record[dataIndex]
})(
) : (
children
)}
);
}
render(){
return {this.renderCell}
}
}
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 操作this.addColumns()}/>
},
width:'20%',
dataIndex: 'operation',
render: (_, record) => {
const { editingKey } = this.state
const editable = this.isEditing(record);
return editable ? (
{
form => (
this.save(form,record.key)} >
保存
)
}
取消
) : (
this.edit(record.key)}>编辑
this.delete(record.key)}>
删除
);
},
},
];
}
// 添加
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 (
)
}
}
export default Form.create()(EditTableData)
以上就是React+Antd实现可增删改表格的示例的详细内容，更多关于React+Antd实现可增删改表格的资料请关注脚本之家其它相关文章！