perf(component): 1.优化appendSchemaByField只能单一添加一个表单项的问题,可以传入数组表单项,统一添加,减少重复方法调用 2. 增加批量添加表单项demo (#2472)
This commit is contained in:
parent
582d7e7351
commit
098621892d
|
|
@ -94,7 +94,7 @@ export function useForm(props?: Props): UseFormReturnType {
|
|||
},
|
||||
|
||||
appendSchemaByField: async (
|
||||
schema: FormSchema,
|
||||
schema: FormSchema | FormSchema[],
|
||||
prefixField: string | undefined,
|
||||
first: boolean,
|
||||
) => {
|
||||
|
|
|
|||
|
|
@ -152,19 +152,23 @@ export function useFormEvents({
|
|||
/**
|
||||
* @description: Insert after a certain field, if not insert the last
|
||||
*/
|
||||
async function appendSchemaByField(schema: FormSchema, prefixField?: string, first = false) {
|
||||
async function appendSchemaByField(
|
||||
schema: FormSchema | FormSchema[],
|
||||
prefixField?: string,
|
||||
first = false,
|
||||
) {
|
||||
const schemaList: FormSchema[] = cloneDeep(unref(getSchema));
|
||||
|
||||
const index = schemaList.findIndex((schema) => schema.field === prefixField);
|
||||
|
||||
const _schemaList = isObject(schema) ? [schema as FormSchema] : (schema as FormSchema[]);
|
||||
if (!prefixField || index === -1 || first) {
|
||||
first ? schemaList.unshift(schema) : schemaList.push(schema);
|
||||
first ? schemaList.unshift(..._schemaList) : schemaList.push(..._schemaList);
|
||||
schemaRef.value = schemaList;
|
||||
_setDefaultValue(schema);
|
||||
return;
|
||||
}
|
||||
if (index !== -1) {
|
||||
schemaList.splice(index + 1, 0, schema);
|
||||
schemaList.splice(index + 1, 0, ..._schemaList);
|
||||
}
|
||||
_setDefaultValue(schema);
|
||||
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ export interface FormActionType {
|
|||
setProps: (formProps: Partial<FormProps>) => Promise<void>;
|
||||
removeSchemaByField: (field: string | string[]) => Promise<void>;
|
||||
appendSchemaByField: (
|
||||
schema: FormSchema,
|
||||
schema: FormSchema | FormSchema[],
|
||||
prefixField: string | undefined,
|
||||
first?: boolean | undefined,
|
||||
) => Promise<void>;
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<BasicForm @register="register" @submit="handleSubmit">
|
||||
<template #add="{ field }">
|
||||
<Button v-if="Number(field) === 0" @click="add">+</Button>
|
||||
<Button class="ml-2" v-if="Number(field) === 0" @click="add">批量添加表单配置</Button>
|
||||
<Button v-if="field > 0" @click="del(field)">-</Button>
|
||||
</template>
|
||||
</BasicForm>
|
||||
|
|
@ -106,13 +107,51 @@
|
|||
);
|
||||
n.value++;
|
||||
}
|
||||
/**
|
||||
* @description: 批量添加
|
||||
*/
|
||||
function batchAdd() {
|
||||
appendSchemaByField(
|
||||
[
|
||||
{
|
||||
field: `field${n.value}a`,
|
||||
component: 'Input',
|
||||
label: '字段' + n.value,
|
||||
colProps: {
|
||||
span: 8,
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
field: `field${n.value}b`,
|
||||
component: 'Input',
|
||||
label: '字段' + n.value,
|
||||
colProps: {
|
||||
span: 8,
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
field: `${n.value}`,
|
||||
component: 'Input',
|
||||
label: ' ',
|
||||
colProps: {
|
||||
span: 8,
|
||||
},
|
||||
slot: 'add',
|
||||
},
|
||||
],
|
||||
'',
|
||||
);
|
||||
n.value++;
|
||||
}
|
||||
|
||||
function del(field) {
|
||||
removeSchemaByField([`field${field}a`, `field${field}b`, `${field}`]);
|
||||
n.value--;
|
||||
}
|
||||
|
||||
return { register, handleSubmit, add, del };
|
||||
return { register, handleSubmit, add, del, batchAdd };
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue