1.使用Cascader連級組件實現項目中城市選擇ui
import {cityData} from "./static/js/city";
<Form.Item label="辦公地址" > {getFieldDecorator('addressAll', { rules: [{ required: true, message: '地址詳情不能爲空!' }], })( <Cascader suffixIcon={<Icon type="caret-down"/>} options={cityData} onChange={this.props.selectedCity} placeholder="請選擇" /> )} </Form.Item>
2.地址js文件保存在文件以備用this
格式以下:spa
export const cityData = [{ value: 'zhejiang', label: 'Zhejiang', children: [{ value: 'hangzhou', label: 'Hangzhou', children: [{ value: 'xihu', label: 'West Lake', }], }], }, { value: 'jiangsu', label: 'Jiangsu', children: [{ value: 'nanjing', label: 'Nanjing', children: [{ value: 'zhonghuamen', label: 'Zhong Hua Men', }], }], }]
效果以下3d