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]]
}

你可能感兴趣的:(element-ui,vue.js)