Blame view

src/views/demo/form/AppendForm.vue 2.92 KB
1
2
3
4
5
<template>
  <PageWrapper title="表单增删示例">
    <CollapseContainer title="表单增删">
      <BasicForm @register="register" @submit="handleSubmit">
        <template #add="{ field }">
6
7
          <Button v-if="Number(field) === 0" @click="add">+</Button>
          <Button v-if="field > 0" @click="del(field)">-</Button>
8
9
10
11
12
13
14
15
        </template>
      </BasicForm>
    </CollapseContainer>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form/index';
JinMao authored
16
  import { CollapseContainer } from '/@/components/Container';
17
18
19
20
21
22
23
  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() {
JinMao authored
24
      const [register, { appendSchemaByField, removeSchemaByField, validate }] = useForm({
25
26
        schemas: [
          {
27
            field: 'field0a',
28
            component: 'Input',
29
            label: '字段0',
30
31
32
33
34
35
            colProps: {
              span: 8,
            },
            required: true,
          },
          {
36
            field: 'field0b',
37
            component: 'Input',
38
            label: '字段0',
39
40
41
42
43
44
            colProps: {
              span: 8,
            },
            required: true,
          },
          {
45
            field: '0',
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
            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);
        }
      }
67
      const n = ref(1);
68
69
70
71

      function add() {
        appendSchemaByField(
          {
72
            field: `field${n.value}a`,
73
            component: 'Input',
74
            label: '字段' + n.value,
75
76
77
78
79
            colProps: {
              span: 8,
            },
            required: true,
          },
vben authored
80
          '',
81
82
83
        );
        appendSchemaByField(
          {
84
            field: `field${n.value}b`,
85
            component: 'Input',
86
            label: '字段' + n.value,
87
88
89
90
91
            colProps: {
              span: 8,
            },
            required: true,
          },
vben authored
92
          '',
93
        );
94
95
96
97
98
99
100
101
102
103
104
        appendSchemaByField(
          {
            field: `${n.value}`,
            component: 'Input',
            label: ' ',
            colProps: {
              span: 8,
            },
            slot: 'add',
          },
vben authored
105
          '',
106
107
108
109
110
        );
        n.value++;
      }

      function del(field) {
JinMao authored
111
        removeSchemaByField([`field${field}a`, `field${field}b`, `${field}`]);
112
        n.value--;
113
114
115
116
117
118
      }

      return { register, handleSubmit, add, del };
    },
  });
</script>