# useTable

不会对常规操作改动太大的一个 hook，针对 antd table。可以覆盖 90% 的业务场景，在一定的程度上可以较少代码量。

# Usage

## 全局预设

```ts
import { setUseTableGlobalOptions } from '@kt/unity-hooks';

setUseTableGlobalOptions({
  currentKey: 'pageNo',
  pageSizeKey: 'pageSize',
  dataSourceKey: ['data', 'list'],
  totalKey: ['data', 'total'],
  pageSize: 10
});
```

## 在业务中使用

```vue
<script lang="ts" setup>
import { useTable } from '@kt/unity-hooks';
import { UseTableOptions } from '@kt/unity-hooks/src/useTable/types';

const service = (params: any) => request.get('foo/bar', params);
const tableOptions = reactive<UseTableOptions>({
  // 这里可以进行局部配置覆盖全局预设的配置项
  // currentKey: 'pageNo1',
  // ...

  columns: [
    {
      title: 'ID',
      dataIndex: 'id'
    },
    {
      title: '标题',
      dataIndex: 'title'
    },
    {
      title: '用户名',
      dataIndex: ['user', 'name']
    },
    {
      title: '操作',
      dataIndex: 'action',
      align: 'left'
    }
  ],

  inParams: {
    foo: 'bar'
  },

  /**
   * 请求之前钩子，对入参做一些改变
   * 非必须
   */
  beforeRun() {},

  /**
   * 请求之后钩子，对出参做一些改变，记得 return 改变之后的结果
   * 非必须
   */
  afterRun(dataSource, data) {
    return dataSource;
  },
  /**
   * 分页参数被改变之后钩子，可以处理一些数据用于入参
   * 非必须
   */
  afterChange(_pagination, _filters, _sorter, { currentDataSource }) {}
});

const { VBind, VOn, search, run, pagination } = useTable(service, tableOptions);

const handleSearch = () => {
  search();
};
</script>

<template>
  <a-table rowKey="id" v-bind="VBind" v-on="VOn">
    <template #bodyCell="{ text, column, record }">
      <template v-else-if="column.dataIndex === 'action'">
        <a-button type="link" @click="handleEdit(record)">编辑</a-button>
        <a-button type="link" @click="handleDetail(record)">详情</a-button>
        <a-button type="link" danger>删除</a-button>
      </template>
    </template>
  </a-table>
</template>
```

## 分页 total 手动设置

分页 total 接口与获取列表接口分开，为了接口更快响应，可以设置 `manualSetTotal` 为 `true`，然后手动设置 `pagination.value.total`。

```vue
<script lang="ts" setup>
import { useTable } from '@kt/unity-hooks';
import { UseTableOptions } from '@kt/unity-hooks/src/useTable/types';

const service = (params: any) => request.get('foo/bar', params);
const tableOptions = reactive<UseTableOptions>({
  // 这里可以进行局部配置覆盖全局预设的配置项
  // currentKey: 'pageNo1',
  // ...

  // 局部配置 manualSetTotal 为 true
  manualSetTotal: true,

  columns: [
    {
      title: 'ID',
      dataIndex: 'id'
    },
    {
      title: '标题',
      dataIndex: 'title'
    },
    {
      title: '用户名',
      dataIndex: ['user', 'name']
    },
    {
      title: '操作',
      dataIndex: 'action',
      align: 'left'
    }
  ],

  inParams: {
    foo: 'bar'
  },

  /**
   * 请求之前钩子，对入参做一些改变
   * 非必须
   */
  beforeRun() {},

  /**
   * 请求之后钩子，对出参做一些改变，记得 return 改变之后的结果
   * 非必须
   */
  afterRun(dataSource, data) {
    return dataSource;
  },
  /**
   * 分页参数被改变之后钩子，可以处理一些数据用于入参
   * 非必须
   */
  afterChange(_pagination, _filters, _sorter, { currentDataSource }) {}
});

const { VBind, VOn, search, run, pagination } = useTable(service, tableOptions);

// 保证在 useTable hook 后请求”total 接口“，然后手动设置 pagination.value.total
const getTotal = async () => {
  const res = await request.get('foo/bar/total', {});
  pagination.value.total = res.total;
};
getTotal();

const handleSearch = () => {
  search();
};
</script>

<template>
  <a-table rowKey="id" v-bind="VBind" v-on="VOn">
    <template #bodyCell="{ text, column, record }">
      <template v-else-if="column.dataIndex === 'action'">
        <a-button type="link" @click="handleEdit(record)">编辑</a-button>
        <a-button type="link" @click="handleDetail(record)">详情</a-button>
        <a-button type="link" danger>删除</a-button>
      </template>
    </template>
  </a-table>
</template>
```

# API

## 入参

| 参数    | 说明     | 类型                                        | 默认值 |
| ------- | -------- | ------------------------------------------- | ------ |
| service | 接口方法 | Function(service, options):Promise<any>     | -      |
| options | 配置细项 | 详情看 `@kt/unity-hooks/src/useTable/types` | -      |

## 出参

所有参数都是响应式的

| 参数   | 说明                                        | 类型                                    | 默认值 |
| ------ | ------------------------------------------- | --------------------------------------- | ------ |
| VBind  | 直接被 table v-bind="VBind"                 | Function(service, options):Promise<any> | -      |
| VOn    | 直接被 table v-on="VOn"                     | boolean                                 | -      |
| search | 搜索时调用<br>默认回到第一页，执行 run 方法 | Function():void                         | -      |
| run    | 运行请求表格数据                            | Function():void                         | -      |
| ...    | 更多请查看 `@kt/unity-hooks/src/useTable`   |                                         |        |

# FAQ

\-
