element-ui的Cascader选择器多选回显处理

在遇到后端返回值为一维数组情况下: [1 ,6] 如何渲染在cascader组件上呢,element级联组件多选要求是二维数组形式回显
[[1],[1,6]]

一:数组转换

// key:对比的id , arrData:原始数组
changeCascader(key, arrData) {
    let arr = []; 
    let returnArr = []; // 存放结果的数组
    let depth = 0; // 定义全局层级
    // 定义递归函数
    function childrenEach(childrenData, depthN) {
        for (var j = 0; j < childrenData.length; j++) {
            depth = depthN; // 将执行的层级赋值 到 全局层级
            arr[depthN] = childrenData[j].id;
            if (childrenData[j].id== key) {
                returnArr = arr.slice(0, depthN + 1); //将目前匹配的数组,截断并保存到结果数组,
                break;
            } else {
                if (childrenData[j].children) {
                    depth++;
                    childrenEach(childrenData[j].children, depth);
                }
            }
        }
        return returnArr;
    }
    return childrenEach(arrData, depth);
},

二:拿到对比的数组后将后端返回的数据进行对比

// 例如点击编辑事件
editClick (e) {
   let newArr = []  
   // e.ids代表后端返回的数组 [1,6]
   for(let i in e.ids) {
       // 循环后端返回的数组依次进行对比,添加到newArr 新数组中去
       newArr.push(this.changeCascader(e.ids[i], this.treeData))
   } // 级联多选回显
   console.log(newArr)  
   // 这时候拿到最终数组 [[1],[1,6]]
}
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值