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
4 changed files with 50 additions and 7 deletions

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>