基于Ant Design Vue的省市区级联选择组件应用

对于省市区级联选择，很多做法都是通过一级一级的调用服务端接口来实现的，今天介绍一个完全采用前端、基于Ant Design Vue来构建的省市区级联选择组件。

一、准备省市区数据

1.下载省市区数据
省市区JSON数据

2.将省市区数据保存到areadata.js文件中，并导出

//地区json数据
export default [
    {
        code: "11",
        name: "北京市",
        children: [
            {
                code: "1101",
                name: "市辖区",
                children: [
                    {
                        code: "110101",
                        name: "东城区"
                    },
                    {
                        code: "110102",
                        name: "西城区"
...

二、基于Cascader包装成省市区组件

三、使用该组件

四、效果

效果1

效果2