Naive UI和Vue3批量删除功能实现

批量删除功能实现

在这个示例中，我们将展示如何使用 Vue 3 和 Naive UI 实现一个带有批量删除功能的数据表格组件。以下是核心代码：

vue

<template>
  <n-space vertical :size="12">
    <!-- ... 其他内容 ... -->

    <!-- 批量删除按钮 -->
    <n-button type="error" :disabled="selectedRowKeys.length === 0" @click="batchDelete">
      批量删除
    </n-button>

    <!-- 批量删除确认模态框 -->
    <n-modal v-model:show="batchDeleteDialogVisible" preset="dialog" title="确认批量删除">
      <span>确定要删除选中的 {{ selectedRowKeys.length }} 行记录吗？</span>
      <div style="margin-top: 15px;">
        <n-button type="error" @click="confirmBatchDelete" style="margin-right: 8px;">
          确定
        </n-button>
        <n-button @click="cancelBatchDelete">取消</n-button>
      </div>
    </n-modal>
  </n-space>
</template>

<script>
export default defineComponent({
  setup() {
    const batchDeleteDialogVisible = ref(false);

    const confirmBatchDelete = async () => {
      if (selectedRowKeys.value.length > 0) {
        const response = await Promise.all(selectedRowKeys.value.map(id => deleteTheme(id)));

        const success = response.every(res => res.data.code === 200);

        if (success) {
          message.info("批量删除成功");
          loadThemes();
        } else {
          message.error("批量删除失败");
        }
      }
      batchDeleteDialogVisible.value = false;
    };

    const cancelBatchDelete = () => {
      batchDeleteDialogVisible.value = false;
    };

    const batchDelete = async () => {
      if (selectedRowKeys.value.length > 0) {
        // 打开确认模态框
        batchDeleteDialogVisible.value = true;
        return;  // 不执行实际删除操作，等待用户确认
      }
      // 如果没有选中行，直接返回
      message.warning("请选择要删除的行");
    };

    // ... 其他内容 ...
    
    return {
      // ... 其他返回值 ...
      batchDeleteDialogVisible,
      confirmBatchDelete,
      cancelBatchDelete,
    };
  }
});
</script>

在这段代码中，我们添加了一个批量删除按钮和相应的确认模态框。当用户点击批量删除按钮时，会先弹出确认模态框，用户可以选择确认或取消批量删除。确认删除时，会调用 confirmBatchDelete 方法执行批量删除操作。这个示例使用 Naive UI 提供的 NButton 和 NModal 组件来实现界面元素。

selectedRowKeys.value.map(id => deleteTheme(id))：这部分代码使用 map 函数将 selectedRowKeys.value 数组中的每个元素（即选中行的标识符）映射为一个 Promise 对象，这个 Promise 对象代表了一个异步操作，即删除对应标识符的行。

**Promise.all(…)：**Promise.all 是一个 Promise 工具函数，接受一个包含多个 Promise 的可迭代对象（比如数组），返回一个新的 Promise。这个新 Promise 在所有传入的 Promise 都成功完成时才会被解决（resolved），并返回一个包含所有 Promise 结果的数组