Vue3 ElementPlus el-cascader级联选择器动态加载数据

参考了这位的大佬的写法

element el-cascader动态加载数据 （多级联动，落地实现）_el-cascader 动态加载_林邵晨的博客-CSDN博客

<el-cascader style="width: 300px" :props="address" v-model="addressValue" clearable />

import { ref } from 'vue';
// 省市区接口 改成自己定义的api方法名
import { commonAdministrative } from '@/api/modules/common';

// 默认值 回显数据格式 ['区级code1', '区级code2', '区级code3']
let addressValue = ref(['000001', '000002', '000003'])

// 省市区
let address = {
    lazy: true, // 开启懒加载
    // checkStrictly: true, //可选择任意节点
    async lazyLoad(node, resolve) {
        // node为当前点击的节点，resolve为数据加载完成的回调(必须调用)
        const nodes = [];
        // 构造查询条件 => 接口入参
        let params = {
            parentAreaCode: node.value, // 入参名按照自己的接口来改
        };
        // 请求接口
        let { data } = await commonAdministrative(params)
            if (data) {
                data.map((item) => {
                    let obj = {
                        value: item.areaCode,
                        label: item.areaDesc,
                        leaf: node.level >= 2, // 当 node.level 层级达到2级时, 就不再请求接口
                        // 具体要多少级才不请求接口, 根据层级修改
                    };
                    nodes.push(obj);
                });
            }
            //重新加载节点
            resolve(nodes);
    },
};