123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118 |
- <template>
- <PageWrapper title="表单增删示例">
- <CollapseContainer title="表单增删">
- <BasicForm @register="register" @submit="handleSubmit">
- <template #add="{ field }">
- <Button v-if="Number(field) === 0" @click="add">+</Button>
- <Button v-if="field > 0" @click="del(field)">-</Button>
- </template>
- </BasicForm>
- </CollapseContainer>
- </PageWrapper>
- </template>
- <script lang="ts">
- import { defineComponent, ref } from 'vue';
- import { BasicForm, useForm } from '/@/components/Form/index';
- import { CollapseContainer } from '/@/components/Container';
- import { Input } from 'ant-design-vue';
- import { PageWrapper } from '/@/components/Page';
- import { Button } from '/@/components/Button';
- export default defineComponent({
- components: { BasicForm, CollapseContainer, PageWrapper, [Input.name]: Input, Button },
- setup() {
- const [register, { appendSchemaByField, removeSchemaByField, validate }] = useForm({
- schemas: [
- {
- field: 'field0a',
- component: 'Input',
- label: '字段0',
- colProps: {
- span: 8,
- },
- required: true,
- },
- {
- field: 'field0b',
- component: 'Input',
- label: '字段0',
- colProps: {
- span: 8,
- },
- required: true,
- },
- {
- field: '0',
- component: 'Input',
- label: ' ',
- colProps: {
- span: 8,
- },
- slot: 'add',
- },
- ],
- labelWidth: 100,
- actionColOptions: { span: 24 },
- });
- async function handleSubmit() {
- try {
- const data = await validate();
- console.log(data);
- } catch (e) {
- console.log(e);
- }
- }
- const n = ref(1);
- function add() {
- appendSchemaByField(
- {
- field: `field${n.value}a`,
- component: 'Input',
- label: '字段' + n.value,
- colProps: {
- span: 8,
- },
- required: true,
- },
- '',
- );
- appendSchemaByField(
- {
- field: `field${n.value}b`,
- component: 'Input',
- label: '字段' + n.value,
- colProps: {
- span: 8,
- },
- required: true,
- },
- '',
- );
- appendSchemaByField(
- {
- 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 };
- },
- });
- </script>
|