vue3 cascader级联选择器（无限级 动态加载）

 效果图：

 

<template>
    <div>
        <el-cascader v-model="state.categoryEcho"
            :props="propsCascader"
            :show-all-levels="false"
            @change="getCascader">
        </el-cascader>
    </div>
</template>

<script setup>
    import { reactive } from 'vue'
    import { getsubcategories } from '@/api/backlog'

    const state = reactive({
        packParams: {
            id: 0, // 默认0为一级
        },
        categoryEcho: [], // el-cascader绑定数组
    })
    
    const propsCascader = {
      lazy: true, // 开启动态加载子节点
      checkStrictly:true,
      lazyLoad: cascaderLazyLoad, // 加载动态数据的方法，仅在 lazy 为 true 时有效
    }
    

    // isParent为1则有下一级为0则没有下一级
    // 接口返回的 cateId cateName 需要赋值给value label
    // 通过cateId 获取下一级
    const cascaderLazyLoad= async (node, resolve)=>{
        let params = state.packParams.id
        if (node.level === 0) {
            await getsubcategories(params).then((res) => {
                let { code, data } = res.data
                if (code === 200) {
                    state.cateList = data.map((item) => {
                        item.value = item.cateId
                        item.label = item.cateName
                        if (item.isParent === 0) {
                            item.leaf = true
                        }else{
                            item.leaf = false;
                        }
                        return item
                    })
                }
            })
             resolve(state.cateList)
        }
        if (node.data.isParent === 0) {
             resolve([])
        }

        if (node.level !== 0)
            getsubcategories(node.data.cateId).then((res) => {
                let { code, data } = res.data
                let list = []
                if (code === 200) {
                    list = data.filter((item) => {
                        item.value = item.cateId
                        item.label = item.cateName
                        if (item.isParent === 0) {
                            item.leaf = true
                        }else{
                            item.leaf = false
                        }
                        return item
                    })
                    resolve(list)
                }
            })
    }

    const getCascader = (value) => {
        if (value) {
            //这里可以获取选中的ID数组
        }
    }

</script>

 注：还有很多配置可参考element plus 官网 官网地址