element plus 复选框循环 element复选框回显

背景：点击el-table列表操作行的配置按钮出现一个弹窗列表，列表支持翻页，翻页后之前已经手动勾选的状态需要保留；点击提交按钮，进行数据提交。再次打开弹窗列表接口返回上次提交的选中数据，页面需要进行回显，已回显的选中数据支持取消勾选且翻页后继续保持取消勾选的状态。

手动勾选的回显操作前面有详细讲解，本篇不做过多赘述，这里主要写回显操作及取消回显数据的选中状态，以及翻页后继续保持取消勾选状态的操作。

思路：将接口返回的选中状态的数据进行储存，如果取消勾选的该项的id匹配到接口返回的数据，则从储存的数据中删除该条。

问题1：初始化时进行一次列表接口请求，翻页时也需要进行列表接口的请求，如果每次都将接口数据赋值给自定义变量，那数据永远删除的都是上次操作的最后一条数据，删除多个时会有问题。

解决问题1：请求列表接口时，只将初始化时拿到的数据进行保存，翻页时不保存

const initData = ref<Array<any>>([]); //初始化时存放接口返回的已经提交过的选中的数据
const currentData = ref<Array<any>>([]); //全选状态时，如果取消全选，需要得到此时的数据，并与接口返回的已提交的数据进行对比，该字段对此时哪些数据已经选中进行存放
const getTableData = (val: number) => {
  tableLoading.value = true;
  redeemRetainConfigList({ scenarioId: props.beanId, page: currentPage.value, pageSize: pageSize.value }).then((res) => {
    tableLoading.value = false;
    if (val != 0) {  //只保存初始化时的数据，翻页时请求到的数据不进行保存
      initData.value = res.portfolioIdAndNameVOS;
    }
    currentData.value = res.page.content;
    tableData.value.splice(0, tableData.value.length);
    res.page.content.forEach((item) => {
      tableData.value.push({ ...item });
    });
    initCheckedTableData();
  }).catch(() => {
    tableLoading.value = false;
  })
}
//初始化时处理回显上次选中的数据
const initCheckedTableData = function () {
  initData.value.forEach((item) => {
    const checkedRow = tableData.value.find((row: any) => row.portfolioId === item.portfolioId);
    if (checkedRow) {
      tableRef.value.toggleRowSelection(checkedRow, true);
    }
  });
};



//复选框选中事件 portfolioId为唯一标识
const cart = reactive([]);
const lastArr = ref([]); //将回显后选中状态的数据取消勾选，该字段对取消勾选后的数据进行保存
const handleSelect = (selection: any, row: any) => {
  let selectType = '';
  const filterList = selection.filter((item: any) => item.portfolioId === row.portfolioId);
  if (filterList.length > 0) selectType = 'add';
  else selectType = 'delete';
  if (selectType === 'add') {
    const cartFilterList = cart.filter((item) => item.portfolioId === row.portfolioId);
    if (cartFilterList.length === 0) {
      cart.push({ ...row });
    }
  } else {
    //处理回显后选中状态的数据取消勾选操作 start
    lastArr.value = initData.value.filter(item => item.portfolioId != row.portfolioId);
    initData.value.splice(0);
    lastArr.value.forEach((item) => {
      initData.value.push(item)
    })
   //处理回显后选中状态的数据取消勾选操作 end
    const cartFilterList = cart
      .filter((item) => item.portfolioId !== row.portfolioId)
      .map((item) => {
        return { ...item };
      });
    cart.length = 0;
    cart.push(...cartFilterList);
  }
}



const handleSelectAll = function (selection: any, row: any) {
//全选状态时，找到对应的取消选中状态的数据就行删除处理 start
  currentData.value.forEach((item) => {
    lastArr.value = initData.value.filter(itemB => itemB.portfolioId != item.portfolioId);
    initData.value.splice(0);
    lastArr.value.forEach((item) => {
      initData.value.push(item)
    })
  })
//全选状态时，找到对应的取消选中状态的数据就行删除处理 end
  if (selection.length === 0) {
    const cartFilterList = cart
      .filter((item) => {
        return tableData.value.findIndex((row: any) => row.portfolioId === item.portfolioId) === -1;
      })
      .map((item) => {
        return { ...item };
      });
    cart.length = 0;
    cart.push(...cartFilterList);
  } else {
    const selectionFilterList = selection
      .filter((row: any) => {
        return cart.findIndex((item) => item.portfolioId === row.portfolioId) === -1;
      })
      .map((item: any) => {
        return { ...item };
      });
    cart.push(...selectionFilterList);
  }
};


// 翻页时勾选状态保留 start
const setSelectedCheckBox = function () {
  //将回显的选中数据与手动选中的数据进行取并集操作
  let res2 = lastArr.value.concat(cart.filter(item => lastArr.value.findIndex(itemA => itemA.portfolioId == item.portfolioId) == -1));
  res2.forEach((item) => {
    const targetRow = tableData.value.find((row: any) => row.portfolioId === item.portfolioId);
    if (targetRow) {
      tableRef.value.toggleRowSelection(targetRow, true);
    }
  });
};
watch(tableData.value, async () => {
  await nextTick();
  setSelectedCheckBox();
});
// 翻页时勾选状态保留 end

// 重置清空勾选状态 start
const clearCheckBox = function () {
  cart.forEach((tableItem) => {
    const targetRow = tableData.value.find((row: any) => row.portfolioId === tableItem.portfolioId);
    tableRef.value.toggleRowSelection(targetRow, false);
    cart.splice(cart.findIndex((item) => item.portfolioId === tableItem.portfolioId));
  });
};
// 重置清空勾选状态 end


//将选中状态的数据进行提交
const handelSubmit = () => {
//将回显的选中数据与手动选中的数据进行取并集操作
  let res2 = initData.value.concat(cart.filter(item => initData.value.findIndex(itemA => itemA.portfolioId == item.portfolioId) == -1));
  const idArr = reactive([]);
  res2.forEach((item) => {
    idArr.push(item.portfolioId)
  })
  let query = {
    scenarioId: props.beanId,
    portfolioIds: idArr,
  }
  submitRedeemRetain(query).then(() => {
    flashFlag.value = true;
    closePopUp()
  }).catch(() => {
  })
};

。