# useRowSelect Hook

`useRowSelect` 是一个用于管理分页表格选中状态的 Vue 3 hook。它允许用户在切换分页时保持选中状态，并支持同一页面中多个表格的选中状态管理。

## 使用方法

### 初始化 Hook

```javascript
const { 
  selectKeys, 
  selectChange, 
  clearSelect, 
  allSelectKeys, 
  allSelectTableData, 
} = useRowSelect({
  namespace: 'table1', // 用于区分不同表格的唯一标识符，如果只有一个表格可以不传，可以是字符串、数字、计算属性、响应式数据、或 Symbol
  formatTableData: (row) => row, // 用于格式化表格数据的函数
  tableData: [], // 当前页的表格数据，
  rowKey: (row) => row.id // 用于获取行数据唯一标识符的函数
});
```

### 参数说明

- **namespace**:   namespace: 'table1', // 用于区分不同表格的唯一标识符，如果只有一个表格可以不传，可以是字符串、数字、计算属性、响应式数据、或 Symbol
  。默认为 `Symbol('key')`。
- **formatTableData**: 用于格式化表格数据的函数，默认为 `(row) => row`。
- **tableData**: 当前页的表格数据，必填。
- **rowKey**: 用于获取行数据唯一标识符的函数，默认为 `(row) => row.id`。

### 返回值说明

- **selectKeys**: 当前页面的选中项 keys，计算属性。
- **selectChange**: 当表格选中项变化时调用的函数。
- **clearSelect**: 清除指定 `key` 或所有选中项的数据。
- **allSelectKeys**: 所有页面的选中项 keys，计算属性。
- **allSelectTableData**: 所有选中项的表格数据，计算属性。

## 方法说明

### `selectChange`

用于更新当前页面的选中状态。当表格选中项变化时调用该函数。

```javascript
const handleSelectChange = (newSelectedKeys, oldSelectedKeys) => {
  selectChange(newSelectedKeys, oldSelectedKeys);
};
```

### `clearSelect`

用于清除指定 `key` 或所有选中项的数据。

```javascript
clearSelect(); // 清除所有选中项
clearSelect('table1'); // 清除特定 key 的选中项
```

## 完整示例

以下是一个完整的示例，演示如何在 Vue 组件中使用 `useRowSelect` hook。

```vue
<template>
  <div>
    <TableComponent
      :rowKey="rowKey"
      :data="currentTableData"
      :checkedKeys="checkedKeys"
      @$change:checkedKeys="selectChange"
    />
    <button @click="clearSelect">Clear All Selections</button>
  </div>
</template>

<script>
import { ref, computed } from 'vue';
import { useRowSelect } from './useRowSelect';
import TableComponent from './TableComponent.vue'; // 假设有一个表格组件

export default {
  components: { TableComponent },
  setup() {
    const currentTableData = ref([
      { id: 1, name: 'John Doe' },
      { id: 2, name: 'Jane Doe' }
      // ...其他数据
    ]);
    
    const activeTab = computed(() => 'table1');
    const rowKey = (row) => row.id;

    const {
      checkedKeys, 
      selectChange, 
      clearSelect, 
      allSelectKeys, 
      allSelectTableData
    } = useRowSelect({
      namespace: activeTab,
      formatTableData: (row) => row,
      tableData: currentTableData, // 这里直接写
      rowKey
    });

    return {
      currentTableData,
      clearSelect,
      checkedKeys,
      rowKey
    };
  }
};
</script>
```

## 总结

`useRowSelect` hook 提供了一种简单而有效的方式来管理分页表格的选中状态，支持同一页面多个表格的选中状态管理，易于集成和使用。希望本说明文档能帮助你更好地理解和使用这个 hook。