perf(component): 1.优化appendSchemaByField只能单一添加一个表单项的问题,可以传入数组表单项,统一添加,减少重复方法调用 2. 增加批量添加表单项demo (#2472)

This commit is contained in:
Vinton 2022-12-22 21:36:36 +08:00 committed by GitHub
parent 582d7e7351
commit 098621892d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 50 additions and 7 deletions

View File

@ -94,7 +94,7 @@ export function useForm(props?: Props): UseFormReturnType {
},
appendSchemaByField: async (
schema: FormSchema,
schema: FormSchema | FormSchema[],
prefixField: string | undefined,
first: boolean,
) => {

View File

@ -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);

View File

@ -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>;

View File

@ -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>