项目需求,在添加成员面板中,每次点击折叠面板希望不是手风琴模式,且选中的成员不会在点击下一个折叠面板后,被取消选中状态(因为获取数据后重新赋值)
但因为每个折叠面板里的数据是点击之后获取id才去发起请求,获取的成员数据每次都是拼接后重新赋值给memberLists,所以需要在赋值给memberLists前,进行判断操作,如下:
result
是复选框组的v-model
setTimeout(() => {
// 1.获取的数据去重
searchArr = [...new Set(searchArr.map((e) => JSON.stringify(e)))].map(
(e) => JSON.parse(e)
);
// 2.数据赋值
this.memberLists = searchArr;
// 3.因为是异步操作,暂且通过定时器获取完整的数据
setTimeout(() => {
// 4.存放result集合里与获取的数据里有一样值的index,result的索引
let delArr = [];
this.memberLists.map((item) => {
this.result.map((v, index) => {
if (item.id == v.id) {
// 5.遍历获取的单项数据与result集合的值一样,存储此时的index
delArr.push(index);
// 6.根据判断的id,进行字符串拼接,将对应的数据的toggle进行切换
this.$refs[`checkMember${v.id}`][0].toggle(true);
}
});
});
// 7.删除result集合里重复的数据
// 因为当数据重新赋值后,选中状态的数据实际上又被我们自动添加到了result集合里,所以每次获取数据将已选中状态选中后,应当将集合里原先的重复的数据删除,避免了数据重复,造成后面的选中状态取消时无法取消的问题
delArr.map((item, i) => {
if (i == 0) {
this.removeArray(this.result, this.result[item]);
} else {
this.removeArray(this.result, this.result[item - i]);
}
});
console.log(this.result);
// 8.对delArr清零
delArr = []
}, 300);
}, 300);
// 移除数组中对应的对象
removeArray(_arr, _obj) {
let length = _arr.length;
console.log(_arr);
for (let i = 0; i < length; i++) {
if (_arr[i] === _obj) {
if (i === 0) {
_arr.shift(); //删除并返回数组的第一个元素
console.log(1);
return _arr;
} else if (i === length - 1) {
_arr.pop(); //删除并返回数组的最后一个元素
console.log(2);
return _arr;
} else {
_arr.splice(i, 1); //删除下标为i的元素
console.log(3);
return _arr;
}
}
}
},
总结:
:ref="'checkMember' + member.id"
this.$refs[`checkMember${v.id}`][0].toggle(true);