react+ant design实现Table的增、删、改的示例代码
1、main.jsx
importReactfrom'react'; importReactDomfrom'react-dom'; importExampleTablefrom'./ExampleTable.jsx' ReactDom.render(, document.getElementById('AppRoot') );
2、ExampleTable.jsx, 注：记住引入antd.css，否则Table组件无法正常显示。
importReactfrom'react';
import{Table,Button,Input,Icon,Popconfirm,Alert}from'antd';
importAddUserfrom'./AddUser.jsx'
importUserDetailsfrom'./UserDetails.jsx'
classExampleTableextendsReact.Component{
constructor(props){//构造函数
super(props);
this.state={
dataSource:[
{key:1,nid:1,name:'tab',gender:'男',age:22,schoolname:'第一中学',description:'热爱班级活动，尊敬老师'},
{key:2,nid:2,name:'shift',gender:'男',age:22,schoolname:'第一中学',description:'热爱班级活动，尊敬老师'},
{key:6,nid:6,name:'ctrl',gender:'男',age:22,schoolname:'第一中学',description:'热爱班级活动，尊敬老师'},
{key:4,nid:4,name:'capslock',gender:'男',age:22,schoolname:'第一中学',description:'热爱班级活动，尊敬老师'},
{key:5,nid:5,name:'enter',gender:'女',age:22,schoolname:'第一中学',description:'热爱班级活动，尊敬老师'}
],
index:'',
PersonCount:0,
selectedRowKeys:[],
selectedRows:[],
record:'abc'
};
this.onDelete=this.onDelete.bind(this);//绑定this,声明该方法需要绑定this,直接在onClick中调用
this.appendPerson=this.appendPerson.bind(this);
this.handleSelectedDelete=this.handleSelectedDelete.bind(this);
this.columns=[
{title:'编号',dataIndex:'nid',key:'nid',width:'8%'},
{title:'姓名',dataIndex:'name',key:'name',width:'15%'},
{title:'性别',dataIndex:'gender',key:'gender',width:'10%'},
{title:'年龄',dataIndex:'age',key:'age',width:'15%',},//render:(text,record,index)=>(Math.floor(record.age/10))*10+"多岁"},
{title:'学校',dataIndex:'schoolname',key:'schoolname',width:'15%'},
{title:'在校表现',dataIndex:'description',key:'description',width:'20%'},
{title:'操作',dataIndex:'',key:'operation',width:'32%',render:(text,record,index)=>(
)},
];
}
appendPerson(event){//得到子元素传过来的值
letarray=[];
letcount=0;
this.state.dataSource.forEach(function(element){
Object.keys(element).some(function(key){
if(key==='nid'){
count++;
array[count]=element.nid
}
})
})
letsortData=array.sort();//对遍历得到的数组进行排序
letMaxData=sortData[(this.state.dataSource.length)-1]//取最后一位下标的值
event.key=MaxData+1;
event.nid=MaxData+1;
this.setState({
dataSource:[...this.state.dataSource,event]
})
}
onDelete(index){
console.log(index)
constdataSource=[...this.state.dataSource];
dataSource.splice(index,1);//index为获取的索引，后面的1是删除几行
this.setState({dataSource});
}
handleSelectedDelete(){
if(this.state.selectedRowKeys.length>0){
console.log(...this.state.selectedRowKeys)
constdataSource=[...this.state.dataSource]
dataSource.splice(this.state.selectedRows,this.state.selectedRows.length)
this.setState({dataSource});
}
else{
}
}
render(){
//联动选择框
constrowSelection={
onChange:(selectedRowKeys,selectedRows)=>{
this.setState({//将选中的id和对象存入state
selectedRowKeys:selectedRowKeys,
selectedRows:selectedRows
})
console.log(selectedRows,selectedRowKeys)
},
onSelect:(record,selected,selectedRows)=>{
//console.log(record,`selected:${selected}`,`selectedRows:${selectedRows}`);
},
onSelectAll:(selected,selectedRows,changeRows)=>{
//console.log(selected,selectedRows,changeRows);
},
getCheckboxProps:record=>({
disabled:record.name==='DisabledUser',//Columnconfigurationnottobechecked
}),
}
return(