This commit is contained in:
dap
2024-10-07 20:23:55 +08:00
13 changed files with 44 additions and 37 deletions

View File

@@ -46,7 +46,7 @@ const [FirstForm, firstFormApi] = useVbenForm({
},
],
submitButtonOptions: {
text: '下一步',
content: '下一步',
},
wrapperClass: 'grid-cols-1 md:grid-cols-1 lg:grid-cols-1',
});
@@ -60,7 +60,7 @@ const [SecondForm, secondFormApi] = useVbenForm({
handleSubmit: onSecondSubmit,
layout: 'horizontal',
resetButtonOptions: {
text: '上一步',
content: '上一步',
},
schema: [
{

View File

@@ -80,7 +80,7 @@ const [QueryForm] = useVbenForm({
// 是否可展开
showCollapseButton: true,
submitButtonOptions: {
text: '查询',
content: '查询',
},
// 大屏一行显示3个中屏一行显示2个小屏一行显示1个
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
@@ -119,7 +119,7 @@ const [QueryForm1] = useVbenForm({
// 是否可展开
showCollapseButton: true,
submitButtonOptions: {
text: '查询',
content: '查询',
},
// 大屏一行显示3个中屏一行显示2个小屏一行显示1个
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',

View File

@@ -3,7 +3,7 @@ import type { VbenFormProps, VxeGridProps } from '#/adapter';
import { Page } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { Button, message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter';
import { getExampleTableApi } from '#/api';
@@ -92,11 +92,28 @@ const gridOptions: VxeGridProps<RowType> = {
},
};
const [Grid] = useVbenVxeGrid({ formOptions, gridOptions });
const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions });
function toggleFormCollspae() {
gridApi.formApi.resetForm();
gridApi.setState({
formOptions: {
showCollapseButton: !(
gridApi.state?.formOptions?.showCollapseButton ?? true
),
},
});
}
</script>
<template>
<Page auto-content-height>
<Grid />
<Grid>
<template #toolbar-tools>
<Button type="primary" @click="toggleFormCollspae">
切换表单折叠按钮
</Button>
</template>
</Grid>
</Page>
</template>