在遇到后端返回值为一维数组情况下: [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]]
}