mirror of
https://gitee.com/bootx/dax-pay-ui.git
synced 2025-10-14 22:27:05 +00:00
fix: the form not working when setFieldsValue through form-groups and add a demo with form groups (#3765)
* fix(util): 修复form表单批量添加的时候用setFieldsValue和model设置不生效的问题 * feat(demo): 为表单组增删添加表单组增删的demo与给出表单组赋值修复后setFieldsValue的示例
This commit is contained in:
@@ -163,7 +163,7 @@ export function useFormEvents({
|
|||||||
} else {
|
} else {
|
||||||
nestKeyArray.forEach((nestKey: string) => {
|
nestKeyArray.forEach((nestKey: string) => {
|
||||||
try {
|
try {
|
||||||
const value = nestKey.split('.').reduce((out, item) => out[item], values);
|
const value = get(values,nestKey)
|
||||||
if (isDef(value)) {
|
if (isDef(value)) {
|
||||||
unref(formModel)[nestKey] = unref(value);
|
unref(formModel)[nestKey] = unref(value);
|
||||||
validKeys.push(nestKey);
|
validKeys.push(nestKey);
|
||||||
|
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<PageWrapper title="表单增删示例">
|
<PageWrapper title="表单增删示例">
|
||||||
<CollapseContainer title="表单增删">
|
<CollapseContainer title="表单项增删">
|
||||||
<BasicForm @register="register" @submit="handleSubmit">
|
<BasicForm @register="register" @submit="handleSubmit">
|
||||||
<template #add="{ field }">
|
<template #add="{ field }">
|
||||||
<a-button v-if="Number(field) === 0" @click="add">+</a-button>
|
<a-button v-if="Number(field) === 0" @click="add">+</a-button>
|
||||||
@@ -11,6 +11,15 @@
|
|||||||
</template>
|
</template>
|
||||||
</BasicForm>
|
</BasicForm>
|
||||||
</CollapseContainer>
|
</CollapseContainer>
|
||||||
|
<CollapseContainer title="表单组增删" class="my-3">
|
||||||
|
<a-button @click="setGroup">设置初始值</a-button>
|
||||||
|
<a-button class="m-2" @click="addGroup">
|
||||||
|
批量添加表单
|
||||||
|
</a-button>
|
||||||
|
<a-button @click="delGroup">批量减少表单</a-button>
|
||||||
|
<BasicForm @register="registerGroup" @submit="handleSubmitGroup">
|
||||||
|
</BasicForm>
|
||||||
|
</CollapseContainer>
|
||||||
</PageWrapper>
|
</PageWrapper>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
@@ -18,7 +27,10 @@
|
|||||||
import { BasicForm, useForm } from '@/components/Form';
|
import { BasicForm, useForm } from '@/components/Form';
|
||||||
import { CollapseContainer } from '@/components/Container';
|
import { CollapseContainer } from '@/components/Container';
|
||||||
import { PageWrapper } from '@/components/Page';
|
import { PageWrapper } from '@/components/Page';
|
||||||
|
|
||||||
|
import { useMessage } from '@/hooks/web/useMessage';
|
||||||
|
const { createMessage } = useMessage();
|
||||||
|
const count = ref(0);
|
||||||
const [register, { appendSchemaByField, removeSchemaByField, validate }] = useForm({
|
const [register, { appendSchemaByField, removeSchemaByField, validate }] = useForm({
|
||||||
schemas: [
|
schemas: [
|
||||||
{
|
{
|
||||||
@@ -48,6 +60,7 @@
|
|||||||
async function handleSubmit() {
|
async function handleSubmit() {
|
||||||
try {
|
try {
|
||||||
const data = await validate();
|
const data = await validate();
|
||||||
|
createMessage.success("请前往控制台查看输出")
|
||||||
console.log(data);
|
console.log(data);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.log(e);
|
console.log(e);
|
||||||
@@ -121,4 +134,64 @@
|
|||||||
removeSchemaByField([`field${field}a`, `field${field}b`, `${field}`]);
|
removeSchemaByField([`field${field}a`, `field${field}b`, `${field}`]);
|
||||||
n.value--;
|
n.value--;
|
||||||
}
|
}
|
||||||
|
const [
|
||||||
|
registerGroup,
|
||||||
|
{ appendSchemaByField: appendSchemaByFieldGroup, removeSchemaByField:removeSchemaByFieldGroup, getFieldsValue:getFieldsValueGroup,setFieldsValue },
|
||||||
|
] = useForm({
|
||||||
|
schemas: [
|
||||||
|
{
|
||||||
|
field: `field[${count.value}].a`,
|
||||||
|
component: 'Input',
|
||||||
|
label: '字段a',
|
||||||
|
colProps:{span:9},
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: `field[${count.value}].b`,
|
||||||
|
colProps:{span:9},
|
||||||
|
component: 'Input',
|
||||||
|
label: '字段b',
|
||||||
|
},
|
||||||
|
|
||||||
|
],
|
||||||
|
labelWidth: 100,
|
||||||
|
actionColOptions: { span: 24 },
|
||||||
|
baseColProps: { span: 8 },
|
||||||
|
});
|
||||||
|
|
||||||
|
function addGroup() {
|
||||||
|
count.value++;
|
||||||
|
appendSchemaByFieldGroup([ {
|
||||||
|
field: `field[${count.value}].a`,
|
||||||
|
component: 'Input',
|
||||||
|
colProps:{span:9},
|
||||||
|
label: '字段a',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: `field[${count.value}].b`,
|
||||||
|
component: 'Input',
|
||||||
|
colProps:{span:9},
|
||||||
|
label: '字段b',
|
||||||
|
},
|
||||||
|
],"")
|
||||||
|
}
|
||||||
|
|
||||||
|
function delGroup() {
|
||||||
|
removeSchemaByFieldGroup([`field[${count.value}].a`, `field[${count.value}].b`]);
|
||||||
|
count.value--;
|
||||||
|
}
|
||||||
|
|
||||||
|
function setGroup(){
|
||||||
|
setFieldsValue({
|
||||||
|
field:[{
|
||||||
|
a:"默认a",
|
||||||
|
b:"默认b"
|
||||||
|
}]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSubmitGroup(){
|
||||||
|
createMessage.success("请前往控制台查看输出")
|
||||||
|
console.log(getFieldsValueGroup())
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
Reference in New Issue
Block a user