ant design vue级联选择懒加载省市区三级数据

项目中原先是展示的一级数据，后面根据需求改成精确到县的。

使用Cascader级联选择，后台返回的是获取省份的字典接口，根据codeValue一级级查询进行动态加载。

async mounted() {
        this.getAppendTemplate();
        const data = await this.getAreaList() || [];
        this.projectAreaOptions = data.map(item => {
            item.leaf = false;
            return item;
        })
 }

        //获取省份数据
        getAreaList(code) {
            return new Promise((resolve, reject) => {
                code = -1;
                publicapi.findAllProvinceLazy(code).then(res => {
                    if (res.options) {
                        let arr = res.options.map(item => {
                            return {
                                value: item.id,
                                label: item.label,
                                isLeaf: item.leaf
                            }
                        })
                        return resolve(arr)
                    } else {
                        return resolve([])
                    }
                }).catch((err) => {
                    return reject(err)
                })
            })
        },
        //获取下一级数据
        async loadAreaData(selectedOptions) {            
            if (!this.projectAreaOptions.length) {
                this.projectAreaOptions = await this.getAreaList() || [];
            } else {
                const targetOption = selectedOptions[selectedOptions.length - 1];
                targetOption.loading = true;
                const data = await publicapi.findAllProvinceLazy(targetOption.value);
                console.log(data, 'targetOption.value', targetOption.value);
                if (data.options.length) {
                    for (let index = 0; index < data.options.length; index ++) {
                        const element = data.options[index];
                        if (element.children) { delete  element.children }
                        element.value = element.id;
                        element.isLeaf = false;
                    }
                    targetOption.loading = false;
                    targetOption.children = [...data.options];                    
                    this.projectAreaOptions = JSON.parse( JSON.stringify(this.projectAreaOptions) );
                } else {
                    targetOption.loading = false;
                    targetOption.isLeaf = true;
                }
            }
        },
        //选择区域后的操作
        onAreaChange(val, selectedOptions) {
            console.log(val, selectedOptions, 'val, selectedOptions')
        },

非懒加载的级联，后台一次性返回所有数据机构

使用fieldNames自定义options 中 label name children 的字段

后台返回的数据