From dde3652b7d8b68b7f8ac669bd96a55c7b9b1b1fa Mon Sep 17 00:00:00 2001
From: Sina Kulas <84883966+sugar258596@users.noreply.github.com>
Date: Fri, 1 Dec 2023 16:21:30 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3table=E5=A4=8D?=
 =?UTF-8?q?=E9=80=89=E6=A1=86=E7=82=B9=E5=87=BB=E6=97=A0=E6=B3=95=E5=8B=BE?=
 =?UTF-8?q?=E9=80=89=E7=8A=B6=E6=80=81=E9=97=AE=E9=A2=98=20(#3370)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Tang <11726782+sugar_gitee@user.noreply.gitee.com>
---
 src/views/demo/table/FormTable.vue | 32 +++++++++++++++++++-----------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/views/demo/table/FormTable.vue b/src/views/demo/table/FormTable.vue
index 7d6fbb1c356..664ac41700e 100644
--- a/src/views/demo/table/FormTable.vue
+++ b/src/views/demo/table/FormTable.vue
@@ -4,9 +4,11 @@
     <template #headerTop>
       <Alert type="info" show-icon>
         <template #message>
-          <template v-if="checkedKeys.length > 0">
-            <span>已选中{{ checkedKeys.length }}条记录(可跨页)</span>
-            <a-button type="link" @click="checkedKeys = []" size="small">清空</a-button>
+          <template v-if="state.selectedRowKeys.length > 0">
+            <span>已选中{{ state.selectedRowKeys.length }}条记录(可跨页)</span>
+            <a-button type="link" @click="state.selectedRowKeys.splice(0)" size="small"
+              >清空</a-button
+            >
           </template>
           <template v-else>
             <span>未选中任何项目</span>
@@ -20,7 +22,7 @@
   </BasicTable>
 </template>
 <script lang="ts" setup>
-  import { ref } from 'vue';
+  import { reactive } from 'vue';
   import { BasicTable, useTable } from '@/components/Table';
   import { getBasicColumns, getFormConfig } from './tableData';
   import { Alert } from 'ant-design-vue';
@@ -28,7 +30,12 @@
 
   import { demoListApi } from '@/api/demo/table';
 
-  const checkedKeys = ref<Key[]>([]);
+  const state = reactive<{
+    selectedRowKeys: Key[];
+  }>({
+    selectedRowKeys: [],
+  });
+
   const [registerTable, { getForm }] = useTable({
     title: '开启搜索区域',
     api: demoListApi,
@@ -41,7 +48,7 @@
     rowKey: 'id',
     rowSelection: {
       type: 'checkbox',
-      selectedRowKeys: checkedKeys.value,
+      selectedRowKeys: state.selectedRowKeys,
       onSelect: onSelect,
       onSelectAll: onSelectAll,
     },
@@ -53,19 +60,20 @@
 
   function onSelect(record, selected) {
     if (selected) {
-      checkedKeys.value = [...checkedKeys.value, record.id];
+      state.selectedRowKeys.push(record.id);
     } else {
-      checkedKeys.value = checkedKeys.value.filter((id) => id !== record.id);
+      state.selectedRowKeys
+        .splice(0)
+        .push(...state.selectedRowKeys.filter((id) => id !== record.id));
     }
   }
+
   function onSelectAll(selected, selectedRows, changeRows) {
     const changeIds = changeRows.map((item) => item.id);
     if (selected) {
-      checkedKeys.value = [...checkedKeys.value, ...changeIds];
+      state.selectedRowKeys.push(...changeIds);
     } else {
-      checkedKeys.value = checkedKeys.value.filter((id) => {
-        return !changeIds.includes(id);
-      });
+      state.selectedRowKeys.splice(0);
     }
   }
 </script>