Ant Design Cascader组件实现联级组件实现省市区联动

最新推荐文章于 2025-03-31 16:55:27 发布

huazizhanye、

最新推荐文章于 2025-03-31 16:55:27 发布

阅读量1.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： js 文章标签： json vue

本文链接：https://blog.youkuaiyun.com/wzsud/article/details/127614250

js 专栏收录该内容

5 篇文章

订阅专栏

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下载链接........

地址Json结构下载

使用

	data () {
      return {
        addressList: [],
        //options：导入下载好的json 格式
        options: options
      }
    }

json 格式符合Cascader 默认格式，以上代码即可完成联动