需求:点击“试选列表”中的每条记录,添加到“已选试题”中;删除“已选试题”的记录,相应的“试选列表”中对应的记录要取消勾选
成功效果展示
问题:在写这个功能的时候,出现了数组A = 数组B(浅拷贝),修改数组A,数组B的值未发生改变的问题。(数组B为“试选列表”选中的数组,数组A为“已选试题”。以为在删除数组A中的记录时,数组B也会改变,但是并没有。)
只好换种方式解决:使用选中状态切换
// 操作“已选试题”删除按钮(index为删除行的索引值,row为删除行的数据对象)
handleDelete(index, row) {
// 更改红色消息提示的选中数量值
this.selectVal = this.selectVal - 1;
/* 由于是在“已选列表”中操作“试题列表”的数据:
第一步:获取 需要删除“试题列表”某个数据的索引值(根据es6的findIndex查找id来获取)
*/
let indexs = this.testQuesData.findIndex(value => value.id == row.id);
// 第二步:使用 toggleRowSelection(需要切换状态行的数据,false/true) false为取消选中,true为选中
this.$nextTick(() => {
this.$refs.testQuesData.toggleRowSelection(this.testQuesData[indexs], false);
});
}