@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。