选中事件的监听

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

@@ -145,8 +145,8 @@
         bordered
         :columns="columns"
         :pagination="false"
-        :row-selection="true"
-        @onSelect="handleSelectRow"
+        row-key="id"
+        :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);
-  query.ids = selectedRowKeys;
-};
+  console.log(newVal);
+  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');
 
 // 发布类型选项