optimize(projects): optimize table rowSelection

src/hooks/common/table.ts

@@ -1,6 +1,7 @@
 import { computed, effectScope, onScopeDispose, reactive, ref, shallowRef, toValue, watch } from 'vue';
 import type { MaybeRef, Ref } from 'vue';
 import type { TablePaginationConfig } from 'ant-design-vue';
+import type { TableRowSelection } from 'ant-design-vue/es/table/interface';
 import { cloneDeep } from 'lodash-es';
 import { useElementSize } from '@vueuse/core';
 import { useBoolean, useHookTable } from '@sa/hooks';
@@ -181,6 +182,14 @@ export function useTableOperate<T extends TableData = TableData>(data: Ref<T[]>,
     checkedRowKeys.value = keys as T['id'][];
   }
 
+  const rowSelection = computed<TableRowSelection<T>>(() => {
+    return {
+      type: 'checkbox',
+      selectedRowKeys: checkedRowKeys.value,
+      onChange: onSelectChange
+    };
+  });
+
   /** the hook after the batch delete operation is completed */
   async function onBatchDeleted() {
     window.$message?.success($t('common.deleteSuccess'));
@@ -207,6 +216,7 @@ export function useTableOperate<T extends TableData = TableData>(data: Ref<T[]>,
     handleEdit,
     checkedRowKeys,
     onSelectChange,
+    rowSelection,
     onBatchDeleted,
     onDeleted
   };

src/views/manage/menu/index.vue

@@ -162,7 +162,7 @@ const { columns, columnChecks, data, loading, pagination, getData } = useTable({
   ]
 });
 
-const { checkedRowKeys, onBatchDeleted, onDeleted, onSelectChange } = useTableOperate(data, getData);
+const { checkedRowKeys, rowSelection, onBatchDeleted, onDeleted } = useTableOperate(data, getData);
 
 const operateType = ref<OperateType>('add');
 
@@ -238,11 +238,7 @@ init();
         ref="tableWrapperRef"
         :columns="columns"
         :data-source="data"
-        :row-selection="{
-          type: 'checkbox',
-          selectedRowKeys: checkedRowKeys,
-          onChange: onSelectChange
-        }"
+        :row-selection="rowSelection"
         size="small"
         :loading="loading"
         row-key="id"

src/views/manage/role/index.vue

@@ -95,9 +95,9 @@ const {
   handleAdd,
   handleEdit,
   checkedRowKeys,
+  rowSelection,
   onBatchDeleted,
-  onDeleted,
-  onSelectChange
+  onDeleted
   // closeDrawer
 } = useTableOperate(data, getData);
 
@@ -142,11 +142,7 @@ function edit(id: number) {
         ref="tableWrapperRef"
         :columns="columns"
         :data-source="data"
-        :row-selection="{
-          type: 'checkbox',
-          selectedRowKeys: checkedRowKeys,
-          onChange: onSelectChange
-        }"
+        :row-selection="rowSelection"
         :loading="loading"
         row-key="id"
         size="small"

src/views/manage/user/index.vue

@@ -127,9 +127,9 @@ const {
   operateType,
   editingData,
   handleAdd,
-  onSelectChange,
   handleEdit,
   checkedRowKeys,
+  rowSelection,
   onBatchDeleted,
   onDeleted
   // closeDrawer
@@ -178,11 +178,7 @@ function edit(id: number) {
         :columns="columns"
         :data-source="data"
         size="small"
-        :row-selection="{
-          type: 'checkbox',
-          selectedRowKeys: checkedRowKeys,
-          onChange: onSelectChange
-        }"
+        :row-selection="rowSelection"
         :scroll="scrollConfig"
         :loading="loading"
         row-key="id"