feat: add the parameter sortFn to the table

This commit is contained in:
vben
2020-10-25 10:51:24 +08:00
parent d09406e3cb
commit 491ba9a3cc
6 changed files with 43 additions and 6 deletions

View File

@@ -64,7 +64,7 @@
import { ROW_KEY } from './const';
import { PaginationProps } from './types/pagination';
import { deepMerge } from '/@/utils';
import { TableCustomRecord } from 'ant-design-vue/types/table/table';
import { SorterResult, TableCustomRecord } from 'ant-design-vue/types/table/table';
import { useEvent } from '/@/hooks/event/useEvent';
import './style/index.less';
@@ -216,12 +216,22 @@
fetch({ searchInfo: info, page: 1 });
}
function handleTableChange(pagination: PaginationProps) {
const { clearSelectOnPageChange } = unref(getMergeProps);
function handleTableChange(
pagination: PaginationProps,
filters: Partial<Record<string, string[]>>,
sorter: SorterResult<any>
) {
const { clearSelectOnPageChange, sortFn } = unref(getMergeProps);
if (clearSelectOnPageChange) {
clearSelectedRowKeys();
}
setPagination(pagination);
if (sorter && isFunction(sortFn)) {
const sortInfo = sortFn(sorter);
fetch({ sortInfo });
return;
}
fetch();
}

View File

@@ -1,3 +1,5 @@
import { SorterResult } from 'ant-design-vue/types/table/table';
export const ROW_KEY = 'key';
export const PAGE_SIZE_OPTIONS = ['10', '50', '80', '100'];
@@ -10,3 +12,11 @@ export const FETCH_SETTING = {
listField: 'items',
totalField: 'total',
};
export function DEFAULT_SORT_FN(sortInfo: SorterResult<any>) {
const { field, order } = sortInfo;
return {
field,
order,
};
}

View File

@@ -98,6 +98,8 @@ export function useDataSource(
...(useSearchForm ? getFieldsValue() : {}),
...searchInfo,
...(opt ? opt.searchInfo : {}),
...(opt ? opt.sortInfo : {}),
...(opt ? opt.filterInfo : {}),
};
if (beforeFetch && isFunction(beforeFetch)) {
params = beforeFetch(params) || params;

View File

@@ -1,15 +1,25 @@
import type { PropType } from 'vue';
import type { PaginationProps } from './types/pagination';
import type { BasicColumn, FetchSetting, TableSetting } from './types/table';
import type { TableCustomRecord, TableRowSelection } from 'ant-design-vue/types/table/table';
import type {
SorterResult,
TableCustomRecord,
TableRowSelection,
} from 'ant-design-vue/types/table/table';
import type { FormProps } from '/@/components/Form/index';
import { FETCH_SETTING } from './const';
import { DEFAULT_SORT_FN, FETCH_SETTING } from './const';
// 注释看 types/table
export const basicProps = {
tableSetting: {
type: Object as PropType<TableSetting>,
},
sortFn: {
type: Function as PropType<(sortInfo: SorterResult<any>) => any>,
default: DEFAULT_SORT_FN,
},
showTableSetting: {
type: Boolean as PropType<boolean>,
default: false,

View File

@@ -28,6 +28,8 @@ export interface RenderEditableCellParams {
export interface FetchParams {
searchInfo?: any;
page?: number;
sortInfo?: any;
filterInfo?: any;
}
export interface GetColumnsParams {
@@ -75,6 +77,8 @@ export interface TableSetting {
}
export interface BasicTableProps<T = any> {
// 自定义排序方法
sortFn?: (sortInfo: SorterResult<any>) => any;
// 显示表格设置
showTableSetting?: boolean;
tableSetting?: TableSetting;
@@ -106,7 +110,6 @@ export interface BasicTableProps<T = any> {
emptyDataIsShowTable?: boolean;
// 额外的请求参数
searchInfo?: any;
// 使用搜索表单
useSearchForm?: boolean;
// 表单配置