踩坑记29 一些用于 el-cascader 的工具函数

2021.9.24

坑89（el-cascader）：一些配置 el-cascader 时写的工具函数。

允许选任意一级选项：配置  :props="{ checkStrictly: true }"

参考： Cascader 级联选择器 | ElementPlus (element-plus.org)

// 获取适用于el-cascader级联选择器的数据树，传入data为树结构数组，children为其中对象的子树数组
export function getTreeForCascader(data,valueStr,labelStr){
    return data.map(item=>{
        return {
            value: item[valueStr],
            label: item[labelStr],
            children: (item.children && item.children.length>0)?
                getTreeForCascader(item.children,valueStr,labelStr):undefined
        }
    })
}


// 向el-cascader级联选择器的数据树传入无上级的选项，ParentId为0
export function allowNoneParentId(tree){
    tree.push({ value:0, label:'无' })
    return tree
}


// 查找对象内包含几层children，nextCount表示层数/向下找几次
// 用于el-cascader级联选择器显示数据的过滤判断
// 例如，传入一级菜单obj，nextCount=2，是找两次到三级菜单
export function hasNextChildren(obj,nextCount=1){
    if(nextCount<=1){
        return Boolean(obj.children && obj.children.length)
    }else{
        return obj.children && obj.children.length && obj.children.some(node=>{
            return hasNextChildren(node,nextCount-1)
        })
    }
}


// 获取指定层数的适用于el-cascader级联选择器的数据树，传入data为树型结构的数组，level即为级联层数
// 该层无节点的枝会被剔除
export function getLevelTreeForCascader(data,valueStr,labelStr,level=1){
    if(level<=1){
        return data.map(item=>({
            value: item[valueStr],
            label: item[labelStr],
            })
        )
    }else{
        return data.filter(item=>hasNextChildren(item,level-1))
            .map(item=>{
                return {
                    value: item[valueStr],
                    label: item[labelStr],
                    children: getLevelTreeForCascader(item.children,valueStr,labelStr,level-1)
                }
            })
    }
}


// 改变数组中对象的属性名称，包括子树children的
// changeMap中，source是原名称，target是目标名称
export function changeAttrName(arr,changeMap){
    return arr.map(item=>{
        let changedItem={}
        changeMap.forEach(pair=>{
            changedItem[pair.target]=item[pair.source]
        })
        if(item.children && item.children.length){
            changedItem.children=changeAttrName(item.children,changeMap)
        }
        return changedItem
    })
}

by 莫得感情踩坑机(限定)