antd二级联动异步加载
/** * Created by Admin on 2016/9/19. * 批量导入 */ import React, {Component, PropTypes} from "react"; import {Link} from "react-router"; import {Upload, Icon, Select, Row, Col, Button, notification, Card, Cascader} from "antd"; import CustomBreadcrumb from "../CustomBreadcrumb"; import Utils from "../../common/Utils"; import moment from "moment"; export default class ExportData extends Component { state = { inputValue: '', // templateUrl: '/assets/templatefile/行政处罚模板.xlsx', options: [{ value: 'TI_B_XZXK_REPORTING', label: '行政许可', isLeaf: false, }, { value: 'TI_B_XZCF_REPORTING', label: '行政处罚', isLeaf: false, }], }; fetchSelectData = (tableName) => { // debugger; this.setState({loading: true}); const query = { tableName: tableName }; this.props.exportDataService.findList(query) .then(arr => { const options = this.state.options.map(item => { if (item.value === tableName) { item.children = arr.map(value => ({value: value, label: value, isLeaf: true})); } return item; }); this.setState({options: options}); }); // .catch(e => this.setState({loading: false})); // Utils.pushLink(this.props.location.pathname, query); }; onChange = (values, selectedOptions) => { console.log(values, selectedOptions); this.setState({ inputValue: selectedOptions.map(o => o.label).join(', '), }); }; loadData = (selectedOptions) => { console.log('loadData', selectedOptions); const obj = selectedOptions[0]; if (obj && !obj.isLeaf) { this.fetchSelectData(obj.value); } // const targetOption = selectedOptions[selectedOptions.length - 1]; // targetOption.loading = true; // // // load options lazily // setTimeout(() => { // targetOption.loading = false; // targetOption.children = [{ // label: `${targetOption.label} Dynamic 1`, // value: 'dynamic1', // }, { // label: `${targetOption.label} Dynamic 2`, // value: 'dynamic2', // }]; // this.setState({ // options: [...this.state.options], // }); // }, 1000); }; render() { const breadcrumbItems = [{ name: '在线填报' }, { link: '/reporting/data', name: '数据维护' }, { name: '导出错误数据' }]; console.log(this.state); let downloadElement =''; //需要注意这里的取值条件可能有不满足的情况 if(this.state.inputValue && this.state.inputValue.length>6){ const myTime = this.state.inputValue.substring(5); downloadElement = myTime ? <a href={`/inapi/reportingXzcf/export?time=${myTime}`}><Button type="primary" size="large">导出错误数据</Button></a> : ''; } return ( <div> <CustomBreadcrumb global={this.props.global} globalService={this.props.globalService} location={this.props.location} items={breadcrumbItems}/> <div className="block-box"> <div className="block-box-body clearfix"> <Row gutter={24} style={{marginBottom: "40px", marginLeft: "20px"}}> <Col className="gutter-row" span={12}> <div className="ant-row" style={{marginBottom: "40px"}}> <div className="ant-col-5 ant-form-item-label"> <label htmlFor="CF_WSH" className="ant-form-item-required">请选择</label> </div> <Cascader style={{width: '250px'}} options={this.state.options} loadData={this.loadData} onChange={this.onChange} changeOnSelect /> </div> </Col> <Col className="gutter-row" span={5}> {downloadElement} </Col> </Row> </div> </div> </div> ); } }
效果图展示: