关于element-ui cascader级联选择器,选择任意一级选项设置默认值的问题

element-ui cascader默认单选只能选择叶子节点,也就是最末端的节点,目前客户需要所有节点可选,这个element-ui cascader的api提供了解决方案,但同时留了个坑

在单选模式下,你只能选择叶子节点;而在多选模式下,勾选父节点真正选中的都是叶子节点。启用该功能后,可让父子节点取消关联,选择任意一级选项。——by Element原文
写上后是这样的:
关于element-ui cascader级联选择器,选择任意一级选项设置默认值的问题_第1张图片
多了个选择框并且只能点选择框选中,这样看似乎没啥问题,但是。。。。。你会发现原来的默认值不能用了,正常情况下的单选,你只要给一个id就能给你找到对应的叶子节点
这个情况,它需要你提供从父级到子级所有对应id的数组,如果确定层级只有两级是没啥问题,糟糕在你不确定这数组到底有几级,就只能用递归的法子解决

//递归组织树获取默认值数组
    getArr(dataSource, id) {
    var arrRes = [];
    let rev = (data, nodeId) => {
        for (var i = 0, length = data.length; i < length; i++) {
            let node = data[i];
            if (node.id == nodeId) {
                arrRes.unshift(node.id)
                rev(dataSource, node.parentId);
                break;
            }
            else {
                if (node.sysDepartmentTreeNewVos!=null) {
                    rev(node.sysDepartmentTreeNewVos, nodeId);
                }
            }
        }
        return arrRes;
    };
    arrRes = rev(dataSource, id);
    console.log('递归组织树结果',arrRes)
    return arrRes;
},

emmm踩坑日常,生活好难,我并不确定这是最好的解决办法,有更好法子的大牛欢迎提意见,谢谢!

你可能感兴趣的:(前端,vue.js,javascript)