选中事件的监听

src/hooks/useTableSelectionWithPagination.ts

@@ -1,4 +1,6 @@
 import { ref, computed } from 'vue';
+import { merge } from 'lodash-es';
+import { cloneDeep } from 'lodash-es';
 
 interface UseTableSelectionWithPaginationOptions {
   rowKey?: string; // 主键字段名，默认 'id'
@@ -60,18 +62,27 @@ export function useTableSelectionWithPagination(options: UseTableSelectionWithPa
     options.onSelectChange?.();
   };
 
+  // 选择变更处理
+  const handleSelectChange = (keys: Array<string | number>, rows: Array<any>) => {
+    selectedRowKeys.value = keys;
+    selectedRows.value = rows;
+    options.onSelectChange?.();
+  };
+
   const onPageChange = (page: number, pageSize: number) => {
     // console.log('onPageChange', page, pageSize);
     pageInfo.value.page = page;
     pageInfo.value.page_size = pageSize;
     options.onPageChange?.(page);
   };
+  
   const onPageSizeChange = (current: number, size: number) => {
     // console.log('onPageSizeChange', current, size);
     // pageInfo.value.page_size = size;
     // pageInfo.value.page = 1;
     // options.onPageSizeChange?.(size);
   };
+  
   const resetPageInfo = () => {
     pageInfo.value = cloneDeep(DEFAULT_PAGE_INFO);
   };
@@ -80,6 +91,8 @@ export function useTableSelectionWithPagination(options: UseTableSelectionWithPa
     type: 'checkbox',
     showCheckedAll: true,
     width: 48,
+    selectedRowKeys: selectedRowKeys.value,
+    onChange: handleSelectChange
   }));
 
   return {
@@ -92,6 +105,7 @@ export function useTableSelectionWithPagination(options: UseTableSelectionWithPa
     rowSelection,
     handleSelect,
     handleSelectAll,
+    handleSelectChange,
     resetPageInfo,
     DEFAULT_PAGE_INFO,
   };

src/views/property-marketing/assignment-management/components/draw-popup.vue

@@ -145,8 +145,8 @@
         bordered
         :columns="columns"
         :pagination="false"
-        :row-selection="true"
+        row-key="id"
-        @onSelect="handleSelectRow"
+        :row-selection="rowSelection"
       >
         <template #name="{ record }">
           <div class="flex items-center">
@@ -229,16 +229,30 @@ const columns = ref([
 ]);
 
 // 表格分页逻辑
-const { pageInfo, onPageChange, onPageSizeChange } = useTableSelectionWithPagination({
+const { 
+  pageInfo, 
+  onPageChange, 
+  onPageSizeChange, 
+  rowSelection, 
+  selectedRowKeys
+} = useTableSelectionWithPagination({
+  rowKey: 'id',
   onPageChange: () => handleSearch(),
   onPageSizeChange: () => handleSearch(),
 });
 
-const handleSelectRow = (selectedRowKeys, selectedRows) => {
+// 处理选择变更
+// const handleSelectChange = (selectedRowKeys, selectedRows) => {
+//   console.log('选择变更:', selectedRowKeys, selectedRows);
+//   query.ids = selectedRowKeys;
+// };
+
+// 监听选中项变化
+watch(selectedRowKeys, (newVal) => {
   console.log('选择++++++++++++++');
-  console.log(selectedRowKeys, selectedRows);
+  console.log(newVal);
-  query.ids = selectedRowKeys;
+  query.ids = newVal;
-};
+});
 
 // 定义props和emit
 const props = defineProps({
@@ -262,6 +276,14 @@ const handleSearch = async () => {
   pageInfo.value.total = res.data.total;
   materialData.value = [...materialData.value, ...res.data.data];
 };
+
+// 移除原来的 handleSelectRow 方法，因为我们现在使用 hook 提供的 handleSelect 方法
+// const handleSelectRow = (selectedRowKeys, selectedRows) => {
+//   console.log('选择++++++++++++++');
+//   console.log(selectedRowKeys, selectedRows);
+//   query.ids = selectedRowKeys;
+// };
+
 const isActive = ref('ai');
 
 // 发布类型选项