瀏覽代碼

选择题判分已上传增加全选支持全选和取消功能

dengshaobo 3 周之前
父節點
當前提交
19e0bd9705
共有 1 個文件被更改,包括 24 次插入 和 5 次删除
  1. 24 5
      src/views/exam/abnormal/tableList.vue

+ 24 - 5
src/views/exam/abnormal/tableList.vue

@@ -58,8 +58,8 @@
             </div>
         </div>
         <div class="page_table table_row_42" style="width: calc(100% - 40px); margin: auto;" v-loading="isLoading" element-loading-text="加载中……" element-loading-spinner="el-icon-loading" element-loading-background="#ffffff">
-            <el-table ref="popupTable" :key="scanState" @select-all="SelectCheckAll" @selection-change="HandleSelectionChange"  :data="studentTableData" :height="tableHeight" stripe >
-                <el-table-column align="center" type="selection" width="50" v-if="scanState != 0" ></el-table-column>
+            <el-table ref="popupTable" :key="scanState" row-key="id" @select-all="SelectCheckAll" @selection-change="HandleSelectionChange"  :data="studentTableData" :height="tableHeight" stripe >
+                <el-table-column align="center" type="selection" :reserve-selection="true" width="50" v-if="scanState != 0" ></el-table-column>
                 <el-table-column align="center" type="index" width="50" label="序号" :index="HandleIndexMethod"></el-table-column>
                 <el-table-column align="center" prop="studentBatch" label="扫描批次" v-if="scanState == 3"></el-table-column>  
                 <el-table-column align="center" prop="studentCode" label="学号"></el-table-column>
@@ -460,7 +460,8 @@ const defaultProps={
 const keyWord=ref('');//搜索关键词
 const reviewKeyWord=ref('');//复查搜索关键词
 
-const multiSelection=ref([]);//多选数据
+const multiSelection=ref<any[]>([]);//多选数据
+const popupTable=ref<any>(null);//表格 ref, 用于调用 toggleRowSelection / clearSelection
 const isLoading=ref(false);//表格加载状态
 // 学生表格数据(前端分页处理)
 const studentTableData = computed(() => {
@@ -1370,8 +1371,26 @@ const UpdateScanStatus=async( studentIds:any, status:number )=>{
     }
 }
 
-const SelectCheckAll=()=>{
-
+// 表头全选/取消全选事件: selection 为 element-plus 内部处理后的选中项数组
+// 需求: 全选需要跨分页生效, 翻页后仍保持选中态
+// 前提: <el-table> 上配了 row-key="id", 选择列配了 :reserve-selection="true"
+// ❗ 坑: element-plus 内部只切换当前页的行, 开了 reserve-selection 后其他页的选中会保留,
+//         所以不能用 selection.length > 0 判断意图(取消全选时 selection 仍可能不为空),
+//         而是看当前页的行是否还在 selection 里
+const SelectCheckAll = (selection: any[]) => {
+    const tableRef = popupTable.value;
+    if (!tableRef) return;
+    const currentPageIds = new Set(studentTableData.value.map((r: any) => r.id));
+    const shouldSelect = selection.some((r: any) => currentPageIds.has(r.id));
+    if (shouldSelect) {
+        // 全选: 逐行将 studentList(含非当前页) 加入选中集合, reserve-selection 会按 row-key 记住
+        studentList.value.forEach((row: any) => {
+            tableRef.toggleRowSelection(row, true);
+        });
+    } else {
+        // 取消全选: 一次性清空所有选中(含其他页 reserve 的)
+        tableRef.clearSelection();
+    }
 }
 const HandleSelectionChange=(selection:any)=>{
     console.log("打印选中的数据",selection);