運(yùn)行效果：

Video_2025-09-02_173950.gif

<template>
  <div class="batch-delete-demo">
    <!-- 批量刪除按鈕 -->
    <el-button type="danger" @click="handleBatchDelete" :disabled="selectedIds.size === 0" style="margin-bottom: 16px">
      批量刪除 (已選 {{ selectedIds.size }} 項)
    </el-button>

    <!-- 表格（帶選擇框） -->
    <el-table :data="tableData" row-key="id" border style="width: 100%" @selection-change="handleSelectionChange"
      @select-all="handleSelectAll">
      <!-- 選擇列 -->
      <el-table-column type="selection" :reserve-selection="true"></el-table-column>

      <el-table-column prop="id" label="ID" width="100" />
      <el-table-column prop="name" label="名稱" width="200" />
      <el-table-column prop="content" label="內(nèi)容" />
    </el-table>

    <!-- 分頁控件 -->
    <div class="pagination-container">
      <el-pagination v-model:current-page="currentPage" :page-size="pageSize" :total="total"
        @current-change="handleCurrentChange" layout="prev, pager, next, jumper, ->, total" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus'
// 分頁參數(shù)
const currentPage = ref(1);
const pageSize = ref(5); // 每頁5條，方便演示跨頁
const total = ref(20); // 總數(shù)據(jù)20條（共4頁）

// 全局選中的ID集合（跨分頁保留）
const selectedIds = ref(new Set());
// 當(dāng)前頁數(shù)據(jù)
const tableData = ref([]);

// 初始化加載第一頁數(shù)據(jù)
onMounted(() => {
  loadPageData(currentPage.value);
});

// 加載指定頁的數(shù)據(jù)
const loadPageData = (page) => {
  // 模擬接口請求（實(shí)際項目中替換為真實(shí)接口）
  setTimeout(() => {
    // 生成當(dāng)前頁的模擬數(shù)據(jù)
    tableData.value = Array.from({ length: pageSize.value }, (_, i) => {
      const id = (page - 1) * pageSize.value + i + 1;
      return {
        id,
        name: `數(shù)據(jù) ${id}`,
        content: `這是第 ${page} 頁的第 ${i + 1} 條數(shù)據(jù)`
      };
    });
  }, 300);
};

// 切換頁碼時觸發(fā)
const handleCurrentChange = (page) => {
  currentPage.value = page;
  loadPageData(page);
  // 切換頁碼后無需手動操作，:reserve-selection="true"會自動根據(jù)ID匹配選中狀態(tài)
};

// 選擇項變化時更新全局選中集合
const handleSelectionChange = (selectedRows) => {
  // 清空當(dāng)前頁的選中狀態(tài)（避免重復(fù)計算）
  tableData.value.forEach(row => {
    selectedIds.value.delete(row.id);
  });
  // 添加當(dāng)前頁新選中的項
  selectedRows.forEach(row => {
    selectedIds.value.add(row.id);
  });
};

// 全選/取消全選當(dāng)前頁
const handleSelectAll = (selection) => {
  // 全選：添加當(dāng)前頁所有ID
  if (selection.length > 0) {
    tableData.value.forEach(row => {
      selectedIds.value.add(row.id);
    });
  } else {
    // 取消全選：移除當(dāng)前頁所有ID
    tableData.value.forEach(row => {
      selectedIds.value.delete(row.id);
    });
  }
};

// 批量刪除
const handleBatchDelete = () => {
  if (selectedIds.value.size === 0) return;

  // 模擬刪除操作（實(shí)際項目中調(diào)用刪除接口）
  console.log('批量刪除的ID：', Array.from(selectedIds.value));

  // 刪除后重置選中狀態(tài)和當(dāng)前頁數(shù)據(jù)
  selectedIds.value.clear();
  loadPageData(currentPage.value);
  ElMessage.success(`成功刪除 ${selectedIds.value.size} 條數(shù)據(jù)`);
};
</script>

<style scoped>
.pagination-container {
  margin-top: 16px;
  text-align: right;
}
</style>