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

Posted 2023-02-19 仲夏の梦

 效果图：

 

<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 官网 官网地址