我们想要开发一个这样的表格，那么我们要怎么通过ant design和react来进行开发
表格样式
import React,{Fragment,PureComponent} from 'react';
import moment from 'moment'; //引入了moment的库
import {Table} from 'antd';
const {Column } = Table;
class App extends PureComponent{
//测试数据，但是key值一定要有，否则会有warning出现
let testValue =[{
key:'1'，
startTime:'1546916859979',
endTime:'1546916859990',
backup:'20190111136858',
backupNoSize:'52461',
status:'SUCCESS'
},
{
key:'2'，
startTime:'1546916856979',
endTime:'1546916856990',
backup:'201901111375212',
backupNoSize:'52481',
status:'FAILD'
}]
state ={data:testValue } //我们想要在表格中显示的数据
// 对于时间进行标准化的表示
formateDate = text =>{
if(text !== '' && text !==undefined && text !== null && text !== 'none'){
text = moment(parseInt(text)).formate('YYYY/MM/DD hh:mm:ss');
return text;
}else{
text ='--';
return text;
}
}
// 对操作进行处理
operateCell =(text,recorder) =>{
switch (recorder.status){
case 'SUCCESS':
return (<div><a>恢复</a><a>删除</a></div>)
default：
return (<a>删除</a>)
}
}
render(){
return (
<Table dataSource ={this.state.data}>
<Column title ='序号' dataIndex='backupNo' render ={(text,recorder,index) => <span>{index +1}</span>}/>
<Column title ='开始时间' dataIndex='startTime' render ={text =>this.formateDate(text)}/>
<Column title ='开始时间' dataIndex='endTime' render ={text =>this.formateDate(text)}/>
<Column title ='备份集' dataIndex='backup'/ >
<Column title ='备份大小' dataIndex='backupNoSize' />
<Column title ='状态' dataIndex='status' />
<Column title ='操作' dataIndex='operate' render ={(text,recorder) =>this.operateCell(text，recorder)}/>
)
}
}
