Ant Design Cascader 联级组件实现省市区联动
<a-form ref="formRegister" :form="form" id="formRegister" ><a-form-item label="地址"><a-cascader size="large" :options="options" placeholder="请选择" @change="onChange" v-decorator="['addressValue',{rules: [{required: true, message: '地址不能为空'}],initialValue: addressList.addressValue,}]"/><a-inputsize="large"type="text":max-length="100"placeholder="请输入详细地址"v-decorator="['address']"></a-input></a-form-item></a-form>
回显地址：
// 例：initialValue: ['河北省', '邯郸市', '邯山区']initialValue: addressList
options 数据格式
[{"label": "北京市","value": "北京市","children": [{"label": "北京市","value": "北京市","children": [{"label": "东城区","value": "东城区"},{"label": "西城区","value": "西城区"},{"label": "朝阳区","value": "朝阳区"},{"label": "丰台区","value": "丰台区"},{"label": "石景山区","value": "石景山区"},{"label": "海淀区","value": "海淀区"},{"label": "门头沟区","value": "门头沟区"},{"label": "房山区","value": "房山区"},{"label": "通州区","value": "通州区"},{"label": "顺义区","value": "顺义区"},{"label": "昌平区","value": "昌平区"},{"label": "大兴区","value": "大兴区"},{"label": "怀柔区","value": "怀柔区"},{"label": "平谷区","value": "平谷区"},{"label": "密云县","value": "密云县"},{"label": "延庆县","value": "延庆县"}]}]},..........下面有json下载链接........
地址Json结构下载
使用
data () {return {addressList: [],//options：导入下载好的json 格式options: options}}
json 格式符合Cascader 默认格式，以上代码即可完成联动
