未验证 提交 09862189 编写于 作者: V Vinton 提交者: GitHub

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

perf(component): 1.优化appendSchemaByField只能单一添加一个表单项的问题,可以传入数组表单项,统一添加,减少重复方法调用 2. 增加批量添加表单项demo (#2472)
上级 582d7e73
......@@ -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>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册