element-plus+axios+vue3+json-server实现批量删除

const multipleSelection = ref([])   //用于保存当前选中的表格行的数据。
const handleSelectionChange = (val) => {  //val是一个数组
  multipleSelection.value = val
}

const deleteArray = []
const handleAllDelete = () => {
  multipleSelection.value.forEach(item => {
    deleteArray.push(item.id);
  });
  console.log(deleteArray)
  const deleteRequests = deleteArray.map(id => {
    const deleteUrl = `${baseURL}/sys_user/${id}`;
    return axios.delete(deleteUrl);
  });
  Promise.all(deleteRequests)
      .then(responses => {
        ElMessage.success('批量删除成功');
        // 清空 deleteArray，准备下一次操作
        deleteArray.length = 0;
        // 重新查询用户数据
      })
      .catch(error => {
        ElMessage.warning(error)
      });
      queryUser()//放到then里会报进程占用错误
}

1. multipleSelection 和 handleSelectionChange：

• multipleSelection 是一个 Vue3 的响应式引用，用于保存当前选中的表格行的数据。ref([]) 初始化为一个空数组。
• handleSelectionChange 是一个处理表格行选中状态变化的函数。当表格行选中状态发生变化时，传递给该函数的参数 val 是一个数组，包含了当前被选中的表格行的数据。

2. deleteArray：

• deleteArray 是一个普通数组，用于存储要批量删除的项的 ID。在 handleAllDelete 函数中，通过遍历 multipleSelection.value 将选中项的 ID 添加到 deleteArray 中。

3. handleAllDelete：

• handleAllDelete 函数用于处理批量删除的逻辑。
• 遍历 multipleSelection.value 获取每个选中项的 ID，并将这些 ID 添加到 deleteArray。
• 构建 deleteRequests 数组，其中每个元素都是一个 Axios DELETE 请求，针对 baseURL/sys_user/${id}。
• 使用 Promise.all 等待所有删除请求完成，然后执行 .then 中的逻辑：

• 使用 ElMessage.success 提示用户批量删除成功。
• 清空 deleteArray，以便进行下一次操作。
• 调用 queryUser() 重新查询用户数据。

• 如果发生错误，使用 ElMessage.warning 提示用户删除失败。

4. 关于 queryUser() 的位置：

• 将 queryUser() 放在 .then 中会报进程占用错误。这可能是因为我的queryUser()放到了onMounted函数里有问题

很多人会想如果multipleSelection(选中的表格数据)只用于批量删除操作，那么直接

val.forEach(item => {
   multipleSelection.value.push(val.id)
 });

将id数组Axios DELETE 就行，但因为我使用的是json-server作为虚拟后端(没有测试mysql)，不能传id批量删除，所以退而求其次使用 map 创建一个包含多个 Axios DELETE 请求的数组，并使用 Promise.all 等待所有请求完成。每个请求对应一个要删除的资源的 ID。