z-crud-table
Version:
A powerful and flexible CRUD table component for Vue 3 and Element Plus.
555 lines (553 loc) • 14.3 kB
TypeScript
import { PropType } from 'vue';
declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<import('vue').ExtractPropTypes<{
/**
* @description 组件的主题风格
* @type {'default' | 'large-screen'}
*/
theme: {
type: PropType<"default" | "large-screen">;
default: string;
};
customClass: {
type: StringConstructor;
default: string;
};
apiUrlQuery: {
type: StringConstructor;
required: true;
};
apiUrlDetail: {
type: StringConstructor;
required: true;
};
apiUrlCreate: {
type: StringConstructor;
required: true;
};
apiUrlUpdate: {
type: StringConstructor;
required: true;
};
apiUrlDelete: {
type: StringConstructor;
required: true;
};
/**
* @description 加载数据时显示的提示文字
* @type {String}
*/
loadingText: {
type: StringConstructor;
default: string;
};
/**
* @description 遮罩层的背景色 (CSS color)
* @type {String}
*/
loadingBackground: {
type: StringConstructor;
default: string;
};
showSearchSection: {
type: BooleanConstructor;
default: boolean;
};
showSearchActionButtons: {
type: BooleanConstructor;
default: boolean;
};
/**
* @description [✨ 新增] 单独控制“搜索”按钮的显示
* 必须在 showSearchActionButtons = true 时才生效
* @type {Boolean}
*/
showSearchButton: {
type: BooleanConstructor;
default: boolean;
};
/**
* @description [✨ 新增] 单独控制“清空”按钮的显示
* 必须在 showSearchActionButtons = true 时才生效
* @type {Boolean}
*/
showClearButton: {
type: BooleanConstructor;
default: boolean;
};
showNewBtn: {
type: BooleanConstructor;
default: boolean;
};
columns: {
type: PropType<any[]>;
default: () => never[];
};
onBeforeQuery: {
type: PropType<(params: any) => any>;
};
onAfterQuery: {
type: PropType<(data: any[], params: any) => any[] | Promise<any[]>>;
};
onBeforeOpenDialog: {
type: PropType<(mode: string, data?: any) => any>;
};
onAfterOpenDialog: {
type: PropType<(mode: string, data: any) => void>;
};
onBeforeSubmit: {
type: PropType<(data: any, mode: "add" | "edit") => any>;
};
onAfterSubmit: {
type: PropType<(mode: string, data: any) => void>;
};
onBeforeDelete: {
type: PropType<(ids: number[], rows: any[]) => boolean | Promise<boolean>>;
};
onAfterDelete: {
type: PropType<(ids: number[], rows: any[]) => void>;
};
showSelectionColumn: {
type: BooleanConstructor;
default: boolean;
};
showIndexColumn: {
type: BooleanConstructor;
default: boolean;
};
showActionsColumn: {
type: BooleanConstructor;
default: boolean;
};
showEditButton: {
type: BooleanConstructor;
default: boolean;
};
showDeleteButton: {
type: BooleanConstructor;
default: boolean;
};
showViewButton: {
type: BooleanConstructor;
default: boolean;
};
actionsColumnWidth: {
type: (StringConstructor | NumberConstructor)[];
default: number;
};
dialogWidth: {
type: StringConstructor;
default: string;
};
initialSearchForm: {
type: ObjectConstructor;
default: () => {
pageNum: number;
pageSize: number;
};
};
showPagination: {
type: BooleanConstructor;
default: boolean;
};
pageSizes: {
type: ArrayConstructor;
default: () => number[];
};
paginationLayout: {
type: StringConstructor;
default: string;
};
paginationBackground: {
type: BooleanConstructor;
default: boolean;
};
paginationSmall: {
type: BooleanConstructor;
default: boolean;
};
paginationHideOnSinglePage: {
type: BooleanConstructor;
default: boolean;
};
dialogFormConfig: {
type: () => any[];
default: () => never[];
};
dialogFormRules: {
type: ObjectConstructor;
default: () => {};
};
/**
* @description 弹窗表单的标签宽度 (label-width)
* @type {String}
*/
dialogFormLabelWidth: {
type: StringConstructor;
default: string;
};
/**
* @description 是否以 multipart/form-data 格式提交表单。
* 适用于需要上传文件的场景。
* @type {Boolean}
*/
submitAsFormData: {
type: BooleanConstructor;
default: boolean;
};
/**
* @description [✨ 新增] 控制弹窗是否在组件内部全屏
* @type {Boolean}
*/
dialogFullscreen: {
type: BooleanConstructor;
default: boolean;
};
/**
* @description [✨ 新增] 新增弹窗的自定义标题
* @type {String}
*/
addDialogTitle: {
type: StringConstructor;
default: string;
};
/**
* @description [✨ 新增] 编辑弹窗的自定义标题
* @type {String}
*/
editDialogTitle: {
type: StringConstructor;
default: string;
};
}>, {
refresh: () => Promise<void>;
search: (params?: any) => void;
handleDelete: (ids: number[]) => Promise<void>;
openDialog: (mode: "add" | "view" | "edit", dataPayload?: any) => Promise<void>;
submit: (mode: "add" | "view" | "edit", data: Record<string, any>) => Promise<void>;
closeDialog: () => void;
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
submit: (...args: any[]) => void;
delete: (...args: any[]) => void;
"open-dialog": (...args: any[]) => void;
"update:initialSearchForm": (...args: any[]) => void;
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
/**
* @description 组件的主题风格
* @type {'default' | 'large-screen'}
*/
theme: {
type: PropType<"default" | "large-screen">;
default: string;
};
customClass: {
type: StringConstructor;
default: string;
};
apiUrlQuery: {
type: StringConstructor;
required: true;
};
apiUrlDetail: {
type: StringConstructor;
required: true;
};
apiUrlCreate: {
type: StringConstructor;
required: true;
};
apiUrlUpdate: {
type: StringConstructor;
required: true;
};
apiUrlDelete: {
type: StringConstructor;
required: true;
};
/**
* @description 加载数据时显示的提示文字
* @type {String}
*/
loadingText: {
type: StringConstructor;
default: string;
};
/**
* @description 遮罩层的背景色 (CSS color)
* @type {String}
*/
loadingBackground: {
type: StringConstructor;
default: string;
};
showSearchSection: {
type: BooleanConstructor;
default: boolean;
};
showSearchActionButtons: {
type: BooleanConstructor;
default: boolean;
};
/**
* @description [✨ 新增] 单独控制“搜索”按钮的显示
* 必须在 showSearchActionButtons = true 时才生效
* @type {Boolean}
*/
showSearchButton: {
type: BooleanConstructor;
default: boolean;
};
/**
* @description [✨ 新增] 单独控制“清空”按钮的显示
* 必须在 showSearchActionButtons = true 时才生效
* @type {Boolean}
*/
showClearButton: {
type: BooleanConstructor;
default: boolean;
};
showNewBtn: {
type: BooleanConstructor;
default: boolean;
};
columns: {
type: PropType<any[]>;
default: () => never[];
};
onBeforeQuery: {
type: PropType<(params: any) => any>;
};
onAfterQuery: {
type: PropType<(data: any[], params: any) => any[] | Promise<any[]>>;
};
onBeforeOpenDialog: {
type: PropType<(mode: string, data?: any) => any>;
};
onAfterOpenDialog: {
type: PropType<(mode: string, data: any) => void>;
};
onBeforeSubmit: {
type: PropType<(data: any, mode: "add" | "edit") => any>;
};
onAfterSubmit: {
type: PropType<(mode: string, data: any) => void>;
};
onBeforeDelete: {
type: PropType<(ids: number[], rows: any[]) => boolean | Promise<boolean>>;
};
onAfterDelete: {
type: PropType<(ids: number[], rows: any[]) => void>;
};
showSelectionColumn: {
type: BooleanConstructor;
default: boolean;
};
showIndexColumn: {
type: BooleanConstructor;
default: boolean;
};
showActionsColumn: {
type: BooleanConstructor;
default: boolean;
};
showEditButton: {
type: BooleanConstructor;
default: boolean;
};
showDeleteButton: {
type: BooleanConstructor;
default: boolean;
};
showViewButton: {
type: BooleanConstructor;
default: boolean;
};
actionsColumnWidth: {
type: (StringConstructor | NumberConstructor)[];
default: number;
};
dialogWidth: {
type: StringConstructor;
default: string;
};
initialSearchForm: {
type: ObjectConstructor;
default: () => {
pageNum: number;
pageSize: number;
};
};
showPagination: {
type: BooleanConstructor;
default: boolean;
};
pageSizes: {
type: ArrayConstructor;
default: () => number[];
};
paginationLayout: {
type: StringConstructor;
default: string;
};
paginationBackground: {
type: BooleanConstructor;
default: boolean;
};
paginationSmall: {
type: BooleanConstructor;
default: boolean;
};
paginationHideOnSinglePage: {
type: BooleanConstructor;
default: boolean;
};
dialogFormConfig: {
type: () => any[];
default: () => never[];
};
dialogFormRules: {
type: ObjectConstructor;
default: () => {};
};
/**
* @description 弹窗表单的标签宽度 (label-width)
* @type {String}
*/
dialogFormLabelWidth: {
type: StringConstructor;
default: string;
};
/**
* @description 是否以 multipart/form-data 格式提交表单。
* 适用于需要上传文件的场景。
* @type {Boolean}
*/
submitAsFormData: {
type: BooleanConstructor;
default: boolean;
};
/**
* @description [✨ 新增] 控制弹窗是否在组件内部全屏
* @type {Boolean}
*/
dialogFullscreen: {
type: BooleanConstructor;
default: boolean;
};
/**
* @description [✨ 新增] 新增弹窗的自定义标题
* @type {String}
*/
addDialogTitle: {
type: StringConstructor;
default: string;
};
/**
* @description [✨ 新增] 编辑弹窗的自定义标题
* @type {String}
*/
editDialogTitle: {
type: StringConstructor;
default: string;
};
}>> & Readonly<{
onSubmit?: ((...args: any[]) => any) | undefined;
onDelete?: ((...args: any[]) => any) | undefined;
"onOpen-dialog"?: ((...args: any[]) => any) | undefined;
"onUpdate:initialSearchForm"?: ((...args: any[]) => any) | undefined;
}>, {
customClass: string;
theme: "default" | "large-screen";
loadingText: string;
loadingBackground: string;
showSearchSection: boolean;
showSearchActionButtons: boolean;
showSearchButton: boolean;
showClearButton: boolean;
showNewBtn: boolean;
columns: any[];
showSelectionColumn: boolean;
showIndexColumn: boolean;
showActionsColumn: boolean;
showEditButton: boolean;
showDeleteButton: boolean;
showViewButton: boolean;
actionsColumnWidth: string | number;
dialogWidth: string;
initialSearchForm: Record<string, any>;
showPagination: boolean;
pageSizes: unknown[];
paginationLayout: string;
paginationBackground: boolean;
paginationSmall: boolean;
paginationHideOnSinglePage: boolean;
dialogFormConfig: any[];
dialogFormRules: Record<string, any>;
dialogFormLabelWidth: string;
submitAsFormData: boolean;
dialogFullscreen: boolean;
addDialogTitle: string;
editDialogTitle: string;
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, Partial<Record<any, (_: {
row: any;
}) => any>> & {
header?(_: {}): any;
"query-conditions"?(_: {
searchForm: {
pageNum: number;
pageSize: number;
};
}): any;
"query-left"?(_: {
searchForm: {
pageNum: number;
pageSize: number;
};
}): any;
"query-right"?(_: {
searchForm: {
pageNum: number;
pageSize: number;
};
}): any;
"action-left"?(_: {
selections: any[];
}): any;
"add-button-content"?(_: {
selections: any[];
}): any;
"action-right"?(_: {
selections: any[];
}): any;
actions?(_: {
row: any;
}): any;
"action-before-edit"?(_: {
row: any;
}): any;
"action-after-delete"?(_: {
row: any;
}): any;
"dialog-form"?(_: {
formData: Record<string, any>;
mode: "add" | "view" | "edit";
formRef: (el: any) => void;
}): any;
"dialog-footer"?(_: {
dialog: {
visible: boolean;
loading: boolean;
submitting: boolean;
mode: "add" | "view" | "edit";
data: Record<string, any>;
formRef: any;
};
submit: () => Promise<void>;
cancel: () => boolean;
}): any;
}>;
export default _default;
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S;
};
};