用的是 ant.design 里的table组件

<div style={{paddingTop:'12px'}}>
// columns	表格列的配置描述
//dataSource	数据数组
//pagination	分页器，参考配置项或 pagination 文档，设为 false 时不展示和进行分页<Table columns={columns} dataSource={this.state.recordsList} pagination={{current:this.state.current,pageSize:20,total:this.state.total,onChange:(current)=>this.pageChange(current)}} /></div>

const columns = [
//record 可以获取到dataSource 里的数据 然后根据状态去显示样式{title: '状态',dataIndex: 'state',key: 'state',render: (text, record) => {let span ='';if(record.state == 1){span = <span style={{color:'#343434'}}>【按时填写】</span>}else if (record.state == 2){span = <span style={{color:'#F5222E'}}>【缺填】</span>} else if (record.state == 3){span = <span style={{color:'#EB6F4E'}}>【补填】</span>}else if (record.state == 4){span = <span style={{color:'#EB6F4E'}}>【无效缺填】</span>} else if (record.state == 5){span = <span style={{color:'#F5222E'}}>【申请无效缺填】</span>}return(<div>{span}</div>)}},{title: '日期',dataIndex: 'time',key: 'time',},{title: '提交人',dataIndex: 'people',key: 'people',},{title: '审核状态',dataIndex: 'examine',key: 'examine',render:(text, record)=>{let span ='';if(record.examine == 1){span = <span style={{color:'#343434'}}>待审核</span>}else if (record.examine == 2){span = <span style={{color:'green'}}>已通过</span>} else if (record.examine == 3){span = <span style={{color:'red'}}>已拒绝</span>}return(<div>{span}</div>)}},{title: '日报类目',dataIndex: 'class',width:'30%',key: 'class',},{title: '操作',key: 'operation',render: (text, record) => {let span ='';let refuse = '';if(record.state == 1){span = '查看详情'}else if(record.state == 2){span = '无效缺填'}else if(record.state == 3){span = '查看详情'}else if(record.state == 5){span = '同意';refuse = '拒绝';}return(<a>{span}  &nbsp; {refuse}</a>)},},
];