@pluve/use-antd-table-vue

ant-design-vue Form 与 Table 联动逻辑封装，建议配合 @pluve/lego-table-vue 使用。

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

安装

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

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

API

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。