diff --git a/docs/src/components/common-ui/vben-vxe-table.md b/docs/src/components/common-ui/vben-vxe-table.md
index 29f679f6aaf..24d911da794 100644
--- a/docs/src/components/common-ui/vben-vxe-table.md
+++ b/docs/src/components/common-ui/vben-vxe-table.md
@@ -165,6 +165,8 @@ vxeUI.renderer.add('CellLink', {
**表单搜索** 部分采用了`Vben Form 表单`,参考 [Vben Form 表单文档](/components/common-ui/vben-form)。
+当启用了表单搜索时,可以在toolbarConfig中配置`search`为`true`来让表格在工具栏区域显示一个搜索表单控制按钮。
+
## 单元格编辑
@@ -215,14 +217,15 @@ const [Grid, gridApi] = useVbenVxeGrid({
useVbenVxeGrid 返回的第二个参数,是一个对象,包含了一些表单的方法。
-| 方法名 | 描述 | 类型 |
-| --- | --- | --- |
-| setLoading | 设置loading状态 | `(loading)=>void` |
-| setGridOptions | 设置vxe-table grid组件参数 | `(options: Partialvoid` |
-| reload | 重载表格,会进行初始化 | `(params:any)=>void` |
-| query | 重载表格,会保留当前分页 | `(params:any)=>void` |
-| grid | vxe-table grid实例 | `VxeGridInstance` |
-| formApi | vbenForm api实例 | `FormApi` |
+| 方法名 | 描述 | 类型 | 说明 |
+| --- | --- | --- | --- |
+| setLoading | 设置loading状态 | `(loading)=>void` | - |
+| setGridOptions | 设置vxe-table grid组件参数 | `(options: Partialvoid` | - |
+| reload | 重载表格,会进行初始化 | `(params:any)=>void` | - |
+| query | 重载表格,会保留当前分页 | `(params:any)=>void` | - |
+| grid | vxe-table grid实例 | `VxeGridInstance` | - |
+| formApi | vbenForm api实例 | `FormApi` | - |
+| toggleSearchForm | 设置搜索表单显示状态 | `(show?: boolean)=>boolean` | 当省略参数时,则将表单在显示和隐藏两种状态之间切换 |
## Props
@@ -236,3 +239,4 @@ useVbenVxeGrid 返回的第二个参数,是一个对象,包含了一些表
| gridOptions | grid组件的参数 | `VxeTableGridProps` |
| gridEvents | grid组件的触发的⌚️ | `VxeGridListeners` |
| formOptions | 表单参数 | `VbenFormProps` |
+| showSearchForm | 是否显示搜索表单 | `boolean` |
diff --git a/docs/src/demos/vben-vxe-table/form/index.vue b/docs/src/demos/vben-vxe-table/form/index.vue
index b5be6c65da1..bcf3f5a5d19 100644
--- a/docs/src/demos/vben-vxe-table/form/index.vue
+++ b/docs/src/demos/vben-vxe-table/form/index.vue
@@ -110,6 +110,11 @@ const gridOptions: VxeGridProps = {
},
},
},
+ toolbarConfig: {
+ // 是否显示搜索表单控制按钮
+ // @ts-ignore 正式环境时有完整的类型声明
+ search: true,
+ },
};
const [Grid] = useVbenVxeGrid({ formOptions, gridOptions });
diff --git a/packages/effects/plugins/src/vxe-table/api.ts b/packages/effects/plugins/src/vxe-table/api.ts
index 365c90b7eb8..0bff8b384c6 100644
--- a/packages/effects/plugins/src/vxe-table/api.ts
+++ b/packages/effects/plugins/src/vxe-table/api.ts
@@ -8,6 +8,7 @@ import { toRaw } from 'vue';
import { Store } from '@vben-core/shared/store';
import {
bindMethods,
+ isBoolean,
isFunction,
mergeWithArrayOverride,
StateHandler,
@@ -20,6 +21,7 @@ function getDefaultState(): VxeGridProps {
gridOptions: {},
gridEvents: {},
formOptions: undefined,
+ showSearchForm: true,
};
}
@@ -108,6 +110,16 @@ export class VxeGridApi {
}
}
+ toggleSearchForm(show?: boolean) {
+ this.setState({
+ showSearchForm: isBoolean(show) ? show : !this.state?.showSearchForm,
+ });
+ // nextTick(() => {
+ // this.grid.recalculate();
+ // });
+ return this.state?.showSearchForm;
+ }
+
unmount() {
this.isMounted = false;
this.stateHandler.reset();
diff --git a/packages/effects/plugins/src/vxe-table/index.ts b/packages/effects/plugins/src/vxe-table/index.ts
index 4ae1c2ef5fd..38fe5880666 100644
--- a/packages/effects/plugins/src/vxe-table/index.ts
+++ b/packages/effects/plugins/src/vxe-table/index.ts
@@ -1,5 +1,6 @@
export { setupVbenVxeTable } from './init';
+export type { VxeTableGridOptions } from './types';
export * from './use-vxe-grid';
-export { default as VbenVxeGrid } from './use-vxe-grid.vue';
+export { default as VbenVxeGrid } from './use-vxe-grid.vue';
export type { VxeGridListeners, VxeGridProps } from 'vxe-table';
diff --git a/packages/effects/plugins/src/vxe-table/types.ts b/packages/effects/plugins/src/vxe-table/types.ts
index e6559a283b6..7e8f2b8397d 100644
--- a/packages/effects/plugins/src/vxe-table/types.ts
+++ b/packages/effects/plugins/src/vxe-table/types.ts
@@ -2,6 +2,7 @@ import type { ClassType, DeepPartial } from '@vben/types';
import type { VbenFormProps } from '@vben-core/form-ui';
import type {
VxeGridListeners,
+ VxeGridPropTypes,
VxeGridProps as VxeTableGridProps,
VxeUIExport,
} from 'vxe-table';
@@ -18,6 +19,16 @@ export interface VxePaginationInfo {
total: number;
}
+interface ToolbarConfigOptions extends VxeGridPropTypes.ToolbarConfig {
+ /** 是否显示切换搜索表单的按钮 */
+ search?: boolean;
+}
+
+export interface VxeTableGridOptions extends VxeTableGridProps {
+ /** 工具栏配置 */
+ toolbarConfig?: ToolbarConfigOptions;
+}
+
export interface VxeGridProps {
/**
* 标题
@@ -38,7 +49,7 @@ export interface VxeGridProps {
/**
* vxe-grid 配置
*/
- gridOptions?: DeepPartial;
+ gridOptions?: DeepPartial;
/**
* vxe-grid 事件
*/
@@ -47,6 +58,10 @@ export interface VxeGridProps {
* 表单配置
*/
formOptions?: VbenFormProps;
+ /**
+ * 显示搜索表单
+ */
+ showSearchForm?: boolean;
}
export type ExtendedVxeGridApi = {
diff --git a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue b/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
index feca4cb2b92..91749835dea 100644
--- a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
+++ b/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
@@ -1,7 +1,10 @@