antd里面表格数据分为三部分，columns:该对象数组用于设置表头数据，里面的dataIndex是对象数据里面对应的key， data:该对象数组用于设置每行的对应表头columns的数据， pagination:该对象用于设置分页
columns: [{ title: '序号', dataIndex: 'indexs', className: 'first-column', '80px' }, { title: '服务名称', dataIndex: 'asvServiceName', className: 'middle-column', '180px' }, { title: 'api_name', dataIndex: 'asvServiceId', className: 'middle-column', '220px' }, { title: '所属系统', dataIndex: 'asvCallPlateform', className: 'middle-column', '150px', render: (text, record) => ( {text == '01' ? '连接平台' : text == '02' ? '中台' : text == '03' ? '理财' : text == '04' ? '网贷' : text == '05' ? '核心' : text == '06' ? '风控' : text == '07' ? 'jarslink' : ''} ), }, { title: '服务状态', dataIndex: 'asvStatus', '100px', className: 'middle-column', render: (text, record) => ( {text == '0' ? '启用' : text == '1' ? '停用' : ''} ), }, { title: '版本号', dataIndex: 'apiVersion', '100px', className: 'middle-column', }, { title: '注册时间', dataIndex: 'createDate', className: 'middle-column', '170px' }, { title: '操作', '220px', dataIndex: 'action', className: 'last-column', render: (text, record) => ( <Fragment>//用于包裹需要包裹的标签，但是不会生成标签
//之所以不用antd的Button组件，是因为在使用的时候会出现莫名样式，eg:圣诞节的时候出现的顶部白云块。对于要求严苛的设计页面是不允许出现这种情况的 <button className='table-button' style={{ marginRight: 10 }} onClick={() => this.queryHandle(record)}> 查看</button> <button className='table-button' style={{ marginRight: 10 }} onClick={() => this.modifyHandle(record)}>修改</button> {/* <button className='table-button' onClick={() => record.asvStatus == '0' ? this.deleteHandle(record, record.apiVersion) : this.openHandle(record.asvServiceId, record.apiVersion)}>{record.asvStatus == '0' ? '停用' : record.asvStatus == '1' ? '启用' : ''}</button> */} </Fragment> ), }], data: [], paginationNo: { pageSize: 10,//每页的条数 current: 1,//当前页 total: 10,//总数据 onChange: this.pagesNo.bind(this),//点击分页号时触发的方法 hideOnSinglePage: true//为true则数据条数不满或刚好一页，则隐藏分页器 },
componentDidMount() { this.setState({ loadhold: true, }); this.pagesNo(1, 10); } toNew(item) { this.props.history.push('/service/atom/add'); } queryHandle(item) { this.props.history.push({ pathname: "/service/atom/query", state: { item: item } }); } addHandle(record) { console.log(record.indexs); } modifyHandle(record) { this.props.history.push({ pathname: "/service/atom/modify", state: { item: record } }); } deleteHandle(record, val) { this.setState({ hasVisible: true, asvServiceId: record.asvServiceId, apiVersion: val, apiId: record.apiId, itemData: { title: '服务停用', tbody: '服务停用后，产品将无法关联该服务。若需关联，需重新启用该服务' } }); } openHandle(item, val) { let that = this; const data = { 'serviceOperateType': 1, 'asvServiceId': item, 'apiVersion': val, 'apiId': this.state.apiId }; const apiUrl1 = MI.baseURI + `/ability/start-or-shutdown`; fetchPost(apiUrl1, data).then((response) => { if (response.success) { message.success('启用成功！！'); that.setState({ loadhold: true, }); this.pagesNo(1, 10); } else { this.setState({ loadhold: false, }); message.error(response.msg); } }); } changeStatus = (status, status_bool) => { let that = this; this.setState({ hasVisible: status }); if (status_bool) { const data = { 'serviceOperateType': 0, 'asvServiceId': this.state.asvServiceId, 'apiVersion': this.state.apiVersion, 'apiId': this.state.apiId }; const apiUrl1 = MI.baseURI + `/ability/start-or-shutdown`; fetchPost(apiUrl1, data).then((response) => { if (response.success) { message.success('停用成功！！'); that.setState({ loadhold: true, }); this.pagesNo(1, 10); } else { this.setState({ loadhold: false, }); message.error(response.msg); } }); } } pagesNo(page, pageSize) { this.setState({ loadhold: true, }); var jjs = (page - 1) * pageSize; const data = { "pageNum": page, "pageSize": '10', 'asvCallPlateform': this.state.asvCallPlateform == '00' ? '' : this.state.asvCallPlateform, 'asvServiceName': this.state.asvServiceName, 'asvStatus': this.state.serviceOperateType == 'jack' ? '' : this.state.serviceOperateType }; const apiUrl1 = MI.baseURI + `/ability/list`; fetchPost(apiUrl1, data).then((response) => { if (response.success) { for (var i = 0; i < response.data.list.length; i++) { response.data.list[i].indexs = i + 1 + jjs;//设置序号 } this.setState({ data: response.data.list, loadhold: false, paginationNo: { pageSize: response.data.pageSize, current: response.data.pageNum, total: response.data.totalCount, onChange: this.pagesNo.bind(this), className: 'myPagination', showTotal: showTotal//
showTotal方法 function showTotal(total) {//用于分页器显示总条数的方法 return `共${total}条记录`; }
} }); } else { this.setState({ loadhold: false, }); message.error(response.msg); } }); } //所属系统 handleChangeS(val) { console.log(val); this.setState({ asvCallPlateform: val }); } //服务状态 handleChangeM(val) { console.log(Number(val)); this.setState({ serviceOperateType: Number(val) }); } //服务名称 sm_servicename_query(e) { this.setState({ asvServiceName: e.target.value }); } sm_query() {//通过条件查询查询 var that = this; this.setState({ loadhold: true, }); this.pagesNo(1, 10); } //重置 sm_reset() { var that = this; this.setState({ loadhold: true, asvCallPlateform: '00', asvServiceName: '', serviceOperateType: 'jack' }); setTimeout(() => { this.pagesNo(1, 10); }, 1000); }