React+Antd实现可增删改表格
最近写了⼀个⼩东西，模仿⾃⼰原先⽤vue写的项⽬改成react语法。写了⼀个可编辑的表格，期间磕磕碰碰的，打算把bug记录下。先把效果图和代码贴上去，主要⽤的是react+antd
table表格，点击编辑，打开弹窗，弹窗内是tab切换显⽰不同的form表单+可编辑表格，表格内操作栏"+"，表格内新增⼀⾏可编辑的数据，编辑，保存，删除这些操作就不细说也不贴效果图了
Table/index.js
import React,{ uState }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, tIsModalVisible]=uState(fal);
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 ==='lor'){
color ='volcano';
}
return(
<Tag color={color} key={tag}>
{UpperCa()}
</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:['lor'],电视节目英语
},
{
key:'3',
name:'Joe Black',
age:32,
address:'Sidney No. 1 Lake Park',
tags:['cool','teacher'],
}
]
;
const showModal=(row)=>{
tIsModalVisible(true);
};
const handleCancel=()=>{
tIsModalVisible(fal);
}
const handleOk=(form={},data)=>{ tIsModalVisible(fal);
console.log(form,data,'pp---')
}
return(
<label>
无边无际的反义词<Row gutter={16} className="gutter-row">
<Col md={24}>
<Card title="基本表格+简单弹框" bordered={fal}>
<Table columns={columns} dataSource={data}/>
</Card>
</Col>
</Row>
{isModalVisible &&<ModalData clo={()=>{
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/ba'
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.tState({
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.tState({
currentTab:key
})
}
render(){
return(
<Modal
title="编辑"
width={650}
destroyOnClo
visible
onOk={()=>this.handleOk()}
