antd + vue3 a-cascader 标签 实现自定义动态获取【地区】级联数据

话不多说直接上代码：

<template>
    地区：
 	<!-- 
	重要属性
        :field-names 自定义的标题显示(省地区)、对应code（地区编号）、子级内容字段（下级城市）
        :options	初始省数据
        :load-data	下级数据调用的方法
		其余的参考API
    -->
    <a-cascader
        :field-names="{label: 'name', value: 'code', children: 'children' }"
        :options="content.addressOptions"
        :load-data="loadAddressData"
        v-model:value="content.areaData"
        placeholder="请选择所在地"
        change-on-select
    />
</template>

<script>
    import { onMounted , reactive} from 'vue';
    export default () {
       const content = reactive({
            addressOptions: [],    //省份
           	areaData: []	//选择完成时候的code集合
        });
            
        // 初始化加载省份数据
        // 第一个参数是pid，0是指对顶层数据，即是省份数据，如果是其他值则是获取城市数据
        const getAreaList = () =>{
            // self.jdAddressSelect 为我们框架结构的请求方式，用的时候请更换自己的请求结构（参数是根据上级code查询子地区）
            self.jdAddressSelect('province', 0, res => {
                if (res.code === 200) { 
                    res.content.forEach(item => {
                        // isLeaf属性需要添加，如果后面还有字节点，则设为false（才会加载loadData）, 没有则设为true
                        item.isLeaf = false;
                        item.province_code = true; // 省份
                    })
                    //将返回的数据赋值给初始数组
                    content.addressOptions = res.content
                }
            })
        };
        //选择省份/城市后 加载下级 市-> 区/县-> 镇/街道
        const loadAddressData = (selectedOptions) => {
            const targetOption = selectedOptions[selectedOptions.length - 1]
            // 加载标识
            targetOption.loading = true
            if (targetOption.province_code) { //查询市
                self.jdAddressSelect('city', targetOption.code, res => {
                    if (res.code === 200) { 
                        res.content.forEach(item => {
                            item.isLeaf = false;
                            item.city_code = true; // 市
                        })
                        //存入下级数据
                        targetOption.children = res.content
                        content.addressOptions = [...content.addressOptions]
                    }
                })
            } else if (targetOption.city_code) { //查询 区/县
                self.jdAddressSelect('county', targetOption.code, res => {
                    if (res.code === 200) { 
                        res.content.forEach(item => {
                            item.isLeaf = false;
                            item.county_code = true; // 镇
                        })
                        targetOption.children = res.content
                        content.addressOptions = [...content.addressOptions]
                    }
                })
            } else {    //查询镇/街道
                self.jdAddressSelect('town', targetOption.code, res => {
                    if (res.code === 200) { 
                        res.content.forEach(item => {
                            item.isLeaf = true; //为true 不再查找
                        })
                        targetOption.children = res.content
                        content.addressOptions = [...content.addressOptions]
                    }
                })
            }
        };	
        //ps: 具体多少级可以根据自己需要，isLeaf为true则能停止下级数据的加载（即停止调用loadAddressData()）
        return{
            content, loadAddressData
        }
    }
</script>