From 64e2ddf10cdcd105b6ed82d8ac8f8e6825a98952 Mon Sep 17 00:00:00 2001
From: tyro880 <你的GitHub绑定邮箱>
Date: Sat, 18 Apr 2026 10:06:38 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E8=A1=A8=E6=A0=BC):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=89=B9=E9=87=8F=E9=80=89=E6=8B=A9=E5=92=8C=E6=93=8D=E4=BD=9C?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 增加表格多选功能
- 添加批量删除和导出按钮
- 实现批量删除和导出逻辑
- 添加相关状态管理和提示信息
---
 src/views/table/complex-table.vue | 91 ++++++++++++++++++++++++++++++-
 1 file changed, 90 insertions(+), 1 deletion(-)

diff --git a/src/views/table/complex-table.vue b/src/views/table/complex-table.vue
index 295c5fc4..4845b730 100644
--- a/src/views/table/complex-table.vue
+++ b/src/views/table/complex-table.vue
@@ -25,6 +25,28 @@
       </el-checkbox>
     </div>
 
+    <div class="batch-operation-container">
+      <el-button 
+        type="danger" 
+        icon="el-icon-delete" 
+        :disabled="selectedList.length === 0" 
+        @click="handleBatchDelete"
+        class="batch-operation-item"
+      >
+        批量删除 ({{ selectedList.length }})
+      </el-button>
+      <el-button 
+        type="primary" 
+        icon="el-icon-download" 
+        :disabled="selectedList.length === 0" 
+        :loading="batchExportLoading"
+        @click="handleBatchExport"
+        class="batch-operation-item"
+      >
+        批量导出 ({{ selectedList.length }})
+      </el-button>
+    </div>
+
     <el-table
       :key="tableKey"
       v-loading="listLoading"
@@ -34,7 +56,9 @@
       highlight-current-row
       style="width: 100%;"
       @sort-change="sortChange"
+      @selection-change="handleSelectionChange"
     >
+      <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="ID" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')">
         <template slot-scope="{row}">
           <span>{{ row.id }}</span>
@@ -223,7 +247,9 @@ export default {
         timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
         title: [{ required: true, message: 'title is required', trigger: 'blur' }]
       },
-      downloadLoading: false
+      downloadLoading: false,
+      selectedList: [],
+      batchExportLoading: false
     }
   },
   created() {
@@ -373,6 +399,69 @@ export default {
     getSortClass: function(key) {
       const sort = this.listQuery.sort
       return sort === `+${key}` ? 'ascending' : 'descending'
+    },
+    handleSelectionChange(selection) {
+      this.selectedList = selection
+    },
+    handleBatchDelete() {
+      if (this.selectedList.length === 0) {
+        this.$message({
+          message: '请先选择要删除的记录',
+          type: 'warning'
+        })
+        return
+      }
+
+      this.$confirm(`确定要删除选中的 ${this.selectedList.length} 条记录吗？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 批量删除操作
+        const ids = this.selectedList.map(item => item.id)
+        const newList = this.list.filter(item => !ids.includes(item.id))
+        this.list = newList
+        this.selectedList = []
+        this.$notify({
+          title: 'Success',
+          message: `成功删除 ${ids.length} 条记录`,
+          type: 'success',
+          duration: 2000
+        })
+      }).catch(() => {
+        // 用户取消删除
+      })
+    },
+    handleBatchExport() {
+      if (this.selectedList.length === 0) {
+        this.$message({
+          message: '请先选择要导出的记录',
+          type: 'warning'
+        })
+        return
+      }
+
+      this.batchExportLoading = true
+      import('@/vendor/Export2Excel').then(excel => {
+        const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
+        const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
+        const data = this.formatJsonForSelected(filterVal)
+        excel.export_json_to_excel({
+          header: tHeader,
+          data,
+          filename: 'selected-table-list'
+        })
+        this.batchExportLoading = false
+      })
+    },
+    formatJsonForSelected(filterVal) {
+      return this.selectedList.map(v => filterVal.map(j => {
+        if (j === 'timestamp') {
+          return parseTime(v[j])
+        } else {
+          return v[j]
+        }
+      }))
     }
   }
 }