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-input
size="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下载链接........
使用
data () {
return {
addressList: [],
//options:导入下载好的json 格式
options: options
}
}
json 格式符合Cascader 默认格式,以上代码即可完成联动