vue3+element ui组件库el-cascader层联选择器动态加载数据，动态加载省市区县镇街道数据,点击第一级请求数据，根据leaf判断是否有子项，第二级....等，原理同上

1.效果图

2.HTML

<el-dialog v-model="dialogVisible"
                           title="请选择服务地区"
                           width="30%">
                   
                    <el-cascader v-model="value"
                                 :props="props"
                                 @change="handleChange"
                                 style="width:100%"
                                 placeholder="请选择服务地区" />
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="dialogVisible = false">取消</el-button>
                            <el-button type="primary"
                                       @click="dialogVisible = false">
                                确定
                            </el-button>
                        </span>
                    </template>
</el-dialog>

3.js 

//准备数据
let options = reactive([])
let dialogVisible = ref(false)

//控制弹层
 const area = ()=>{
        dialogVisible = true

 }

//初始化省数据
    const getAreaData = ()=>{
            // 1. 创建ajax对象（异步对象）
            let xhr = new XMLHttpRequest();
            // 2. 创建请求
            // xhr.open('请求方法','url地址','是否采用异步处理去访问接口true/false')
            xhr.open("GET", "http://120.26.94.63:8000/api/sysOrg/1",true);
            // 3. 发送请求
            xhr.send();
            // 4. 监听状态，接收响应
            xhr.onreadystatechange = function() {
                // 4.1 监听 xhr 对象的请求状态 readyState ；与服务器响应的状态 status
                if (xhr.readyState === 4&& xhr.status === 200) {
                    // 4.2 使用xhr.response 获取服务器返回的数据
                    if(JSON.parse(xhr.response).code== 0){
                        let areaData = JSON.parse(xhr.response).data;
                        let result =  areaData.map(item => ({
                            value:item.id,
                            label:item.name,
                            count:item.count,
                            parentid:item.parentid,
                            children:[]
                        }))
                        options = result
                    }
                    
                }
            }
    }
//el-cascader层级选择器 动态加载数据
    let props = {
        lazy: true,
        checkStrictly: true,
        lazyLoad(node, resolve) {
            let { level } = node
            setTimeout(() => {
            if(node.level == 0){
                    getAreaData() 
                    // 将后端返回的数据处理成组件需要的数据
                    let nodes = Array.from(options).map((item) => ({
                        value: item.value,
                        label: item.label,
                        parentid: item.parentid,
                        leaf: node.level >= 2,
                    }))
                    resolve(nodes)
            }else{
                    //省市区地区无限连级
                     // 1. 创建ajax对象（异步对象）
                    let xhr = new XMLHttpRequest();
                    // 2. 创建请求
                    // xhr.open('请求方法','url地址','是否采用异步处理去访问接口true/false')
                    xhr.open("GET", `http://120.26.94.63:8000/api/sysOrg/${node.value}`,true);
                    // 3. 发送请求
                    xhr.send();
                    // 4. 监听状态，接收响应
                    xhr.onreadystatechange = function() {
                        // 4.1 监听 xhr 对象的请求状态 readyState ；与服务器响应的状态 status
                        if (xhr.readyState === 4&& xhr.status === 200) {
                            // 4.2 使用xhr.response 获取服务器返回的数据
                            if(JSON.parse(xhr.response).code== 0){
                                let areaData = JSON.parse(xhr.response).data;
                                let result =  areaData.map(item => ({
                                    value:item.id,
                                    label:item.name,
                                    count:item.count,
                                    parentid:item.parentid,
                                    children:[],
                                }))
                                options = result
                                let nodesChildren = Array.from(options).map((item) => ({
                                value: item.value,
                                label: item.label,
                                parentid: item.parentid,
                                leaf: item.count == 0,  //当当前数据中字段count == 0时,表示当前叶子节点为最后一项
                            }))
                            resolve(nodesChildren)
                            }
                        }
                    }
            }
            }, 1000)
        },
    }