@pluve/use-antd-table-vue/README.md

ant-design-vue Form 与 Table 联动逻辑封装

# @pluve/use-antd-table-vue

[![npm (scoped)](https://img.shields.io/npm/v/@pluve/use-antd-table-vue?style=for-the-badge)](https://www.npmjs.com/package/@pluve/use-antd-table-vue)

`ant-design-vue` Form 与 Table 联动逻辑封装，建议配合 [@pluve/lego-table-vue](https://www.npmjs.com/package/@pluve/lego-table-vue) 使用。

`@pluve/use-antd-table-vue` 已经投入了我们的生产环境中使用，经受住了来自真实业务的考验，并伴随着我们的业务需求不断完善。

## 安装

```bash
# 使用 npm
npm i @pluve/use-antd-table-vue

# 使用 yarn
yarn add @pluve/use-antd-table-vue
```

## API

```ts
type Data = { total: number; list: any[] };
type Params = [{ current: number; pageSize: number, filters?: any, sorter?: any, extra?: any }, { [key: string]: any }];
type ITableMutateType = {
  data?: any[];
  total?: number;
  current?: number;
  pageSize?: number;
};

const {
  tableProps: {
    dataSource: TData['list'];
    loading: boolean;
    onChange: (
      pagination: any,
      filters?: any,
      sorter?: any,
      extra?: any,
    ) => void;
    pagination: {
      current: number;
      pageSize: number;
      total: number;
    };
  };
  search: {
    submit: () => void;
    reset: () => void;
  };
  mutate: (data?: ITableMutateType | ((oldData?: ITableMutateType) => ITableMutateType | undefined)) => void;
} = useAntdTable<TData extends Data, TParams extends Params>(
  service: (...args: TParams) => Promise<TData>,
  {
    form?: any;
    defaultPageSize?: number;
  }
);
```

### Result

| 参数 | 说明 | 类型 |
| --- | --- | --- |
| tableProps | `Table` 组件需要的数据，直接透传给 `Table` 组件即可 | - |
| search.submit | 提交表单 | `() => void` |
| search.reset | 重置当前表单 | `() => void` |
| mutate | 修改 `Table` 数据 | `(data?: ITableMutateType \| ((oldData?: ITableMutateType) => ITableMutateType \| undefined)) => void` |

### Params

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| form | `Form` 实例 | - | - |
| defaultPageSize | 默认分页数量 | `number` | 10 |

## 使用

## 致谢

本项目实现的灵感源于 [ahooks/useAntdTable](https://ahooks.js.org/zh-CN/hooks/use-antd-table)。