分页多选功能实现

src/views/mailquery/Query.vue

@@ -99,9 +99,9 @@
         </header>
         <main>
             <div class="table-container">
-                <el-table :data="todos" style="width: 100%" stripe ref="tableRef" @selection-change="handleSelectionChange"
-                    @select-all="handleSelectAll">
-                    <el-table-column type="selection" width="30" />
+                <el-table :data="form" style="width: 100%" stripe ref="tableRef" @selection-change="handleSelectionChange"
+                    :row-key="rowKey">
+                    <el-table-column type="selection" width="30" :reserve-selection="true" />
                     <el-table-column prop="mailTime" label="来信时间" align="center" width="170" />
                     <el-table-column label="信件来源" align="center" width="94">
                         <template #default="{ row }">
@@ -114,11 +114,11 @@
                     </el-table-column>
                     <el-table-column prop="contactName" label="姓名" align="center" width="70" />
                     <el-table-column prop="contactPhone" label="联系电话" width="120" />
-                    <el-table-column label="信件等级" width="100">
+                    <!-- <el-table-column label="信件等级" width="100">
                         <template #default="{ row }">
                             <mail-level :value="row.mailLevel" :list="dictData.mail_level" />
                         </template>
-                    </el-table-column>
+                    </el-table-column> -->
                     <el-table-column prop="mailCategory" label="信件分类" width="160" />
                     <el-table-column prop="content" label="信件内容" show-overflow-tooltip />
                     <el-table-column label="信件状态" width="90">
@@ -181,15 +181,18 @@ import { formatTimeText, getDictLable, getFlowTagType } from "@/utils/util";
 import { useDictOptions } from '@/hooks/useDictOptions'
 import { deptLists } from '@/api/org/department'
 import { ref, reactive, watch } from "vue";
+import { ElTable } from "element-plus";
+
+const rowKey = "mailId";
 
-const tableRef = ref(null);
+const tableRef = ref<InstanceType<typeof ElTable>>();
 const mailStore = useMailStore();
 mailStore.getMailCategorys();
 const { dictData } = useDictData(["mail_source", "mail_level", "mail_state"]);
 
 const query = ref({
     contactField: "name",
-    size: 20,
+    size: 10,
     current: 1
 });
 const totalSize = reactive({
@@ -209,58 +212,28 @@ watch(() => query.value.contactField, (val, prevVal) => {
 });
 
 
-const allSelectedRows = ref([]);
 const checkAll = ref(false);
 const isCheckAll = ref(false);
 const selectedCount = ref(0);
-const oldSelection = ref([]);
-const handleSelectAll = (selection: any) => {
-    console.log("handleSelectAll", selection, isCheckAll.value)
-    if (isCheckAll.value === true) {
-        for (let i = 0; i < selection.length; i++) {
-            if (allSelectedRows.value.includes(selection[i].mailId)) {
-                allSelectedRows.value.splice(allSelectedRows.value.indexOf(selection[i].mailId), 1)
-            }
-        }
-    }
-}
+const solveCheckBox = ref([])
 const handleSelectionChange = (selection: any) => {
-    checkAll.value = (tableRef.value.getSelectionRows().length === tableRef.value.data.length) ? true : false
-    isCheckAll.value = (tableRef.value.getSelectionRows().length > 0 &&
-        tableRef.value.data.length > tableRef.value.getSelectionRows().length) ? true : false
-    console.log("oldSelection, selection", oldSelection.value.length, selection.length)
-    sloveAllSelectedRows(selection)
-}
-const sloveAllSelectedRows = (selection: any) => {
-    if (selection.length >= oldSelection.value.length) {
-        for (let s of selection) {
-            if (!oldSelection.value.includes(s) && !allSelectedRows.value.includes(s.mailId)) {
-                allSelectedRows.value.push(s.mailId)
-            }
-        }
-    } else {
-        if (oldSelection.value.length - selection.length === 1) {
-            for (let s of oldSelection.value) {
-                if (!selection.includes(s) && allSelectedRows.value.includes(s.mailId)) {
-                    allSelectedRows.value.splice(allSelectedRows.value.indexOf(s.mailId), 1)
-                }
-            }
-        }
-
-    }
-    oldSelection.value = selection;
-    console.log("oldSelection-Updated:", oldSelection.value)
-    selectedCount.value = allSelectedRows.value.length;
+    solveCheckBox.value = selection
+    refreshCheckAll()
+    selectedCount.value = tableRef.value.getSelectionRows().length
 }
 const handleCheckAll = () => {
     tableRef.value.toggleAllSelection()
 }
+const refreshCheckAll = () => {
+    checkAll.value = (solveCheckBox.value.length === totalSize.total) ? true : false
+    isCheckAll.value = (!checkAll.value && solveCheckBox.value.length > 0) ? true : false
+}
 
 const outputSelectedMail = () => {
-    console.log("outputSelectedMail")
+    console.log("outputSelectedMail", solveCheckBox.value)
 }
 
-const todos = ref([]);
+const form = ref([]);
 const showModel = ref(false);
 const activeMailId = ref("");
 
@@ -271,13 +244,14 @@ function handleMail(mailId) {
 
 const handleSizeChange = (size) => {
     query.value.size = size;
-    console.log("handleSizeChange", query.value.size)
     getList();
+    refreshCheckAll()
 }
 
 const handleCurrentChange = (page) => {
     query.value.current = page;
     getList();
+    refreshCheckAll()
 }
 
 function getList() {
@@ -286,8 +260,7 @@ function getList() {
         query.value.mailTimeEnd = query.value.mailTime[1];
     }
     getDones(query.value).then((data) => {
-        todos.value = data.records;
-        console.log("todos", todos.value)
+        form.value = data.records;
         totalSize.total = data.total;
         totalSize.pages = data.pages;
     });
@@ -307,12 +280,10 @@ function reset() {
 }
 
 const checkMail = () => {
-    console.log("createMail")
+    console.log("checkMail", solveCheckBox.value)
 }
 
 getList()
-
-
 </script>
 <style lang="scss" scoped>
 .table-container {