ORACLE128G
commented
3 weeks ago Closed ORACLE128G closed 3 weeks ago
ORACLE128G
commented
3 weeks ago ORACLE128G
commented
3 weeks ago 这样写每打开一次Drawer组件，然后点击查询按钮，extends.ts中wrapperFn的代码就会多回调一次，没找到原因
<script lang="ts" setup>
import { useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
import { useVbenVxeGrid, type VxeGridProps } from '@vben/plugins/vxe-table';
import { Button, Popconfirm } from 'ant-design-vue';
import { list, remove } from '#/api/test/index';
import {
AddAttrSearchFormColumns,
type AddAttrTableColumn,
AddAttrTableColumns,
} from './data';
/**
* 查询表单配置
*/
const formOptions: VbenFormProps = {
// 默认展开
collapsed: false,
schema: AddAttrSearchFormColumns,
// 控制表单是否显示折叠按钮
showCollapseButton: true,
// 按下回车时是否提交表单
submitOnEnter: false,
// 表单项默认值
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-2',
};
/**
* 表格配置
*/
const gridOptions: VxeGridProps<AddAttrTableColumn> = {
checkboxConfig: {
highlight: true,
labelField: 'name',
},
columnConfig: {
resizable: true,
},
columns: AddAttrTableColumns,
height: 'auto',
keepSource: true,
pagerConfig: {},
proxyConfig: {
response: {
result: 'records',
},
ajax: {
query: async ({ page }) => {
return await list({
current: page.currentPage,
size: page.pageSize,
payload: {
// eslint-disable-next-line no-use-before-define
...(await tableApi.formApi.getValues()),
},
});
},
},
},
};
const [Grid, tableApi] = useVbenVxeGrid({ formOptions, gridOptions });
/**
* 删除行
* @param row 行数据
*/
const deleteRow = async (row: AddAttrTableColumn) => {
remove(row.id);
tableApi.reload();
};
/**
* 新增/编辑抽屉
*/
const [Drawer, drawerApi] = useVbenDrawer({
onCancel() {
drawerApi.close();
},
onConfirm: async () => {
drawerApi.close();
},
title: '测试抽屉',
});
</script>
<template>
<Drawer>
<AddAttrModal />
<Grid table-title="数据列表">
<template #action="{ row }">
<Popconfirm title="确认删除？" @confirm="deleteRow(row)">
<Button danger type="link">删除</Button>
</Popconfirm>
</template>
</Grid>
</Drawer>
</template>
RanMaoting
commented
3 weeks ago 老哥,有解决方案了吗,这个问题出现的概率还挺高的,只要是在弹窗里面使用都会导致这个问题
ORACLE128G
commented
3 weeks ago 老哥,有解决方案了吗,这个问题出现的概率还挺高的,只要是在弹窗里面使用都会导致这个问题
如果你用的table的query去取数据，不要用query传入的表单参数进行查询，可以通过...(await tableApi.formApi.getValues())获取，暂时这样处理的，但肯定不是最优解，等作者答复吧
RanMaoting
commented
3 weeks ago 同时贴一下,在弹窗里面使用grid,在第二次及之后打开弹窗时还会弹出
[Vben Vxe Table]: The formConfig in the grid is not supported, please use the formOptions props
这个警告,不知道是不是同一个问题导致
ORACLE128G
commented
3 weeks ago 同时贴一下,在弹窗里面使用grid,在第二次及之后打开弹窗时还会弹出 [Vben Vxe Table]: The formConfig in the grid is not supported, please use the
formOptionsprops 这个警告,不知道是不是同一个问题导致
不是同一个问题，这个我已经给作者提了PR：#4794
Version
Vben Admin V5
Describe the bug?
Drawer组件关闭后再打开未重置表单的state，可能与这一笔修改有关：fix: when the form is opened repeatedly, the state is unexpectedly stroyed #4406
Reproduction
在Drawer组件中使用useVbenVxeGrid，关闭后再打开，Form中的参数不会重置，并且在查询条件中输入新的值也不会更新
System Info
Relevant log output
No response
Validations