AppendForm.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <template>
  2. <PageWrapper title="表单增删示例">
  3. <CollapseContainer title="表单增删">
  4. <BasicForm @register="register" @submit="handleSubmit">
  5. <template #add="{ field }">
  6. <Button v-if="Number(field) === 0" @click="add">+</Button>
  7. <Button v-if="field > 0" @click="del(field)">-</Button>
  8. </template>
  9. </BasicForm>
  10. </CollapseContainer>
  11. </PageWrapper>
  12. </template>
  13. <script lang="ts">
  14. import { defineComponent, ref } from 'vue';
  15. import { BasicForm, useForm } from '/@/components/Form/index';
  16. import { CollapseContainer } from '/@/components/Container';
  17. import { Input } from 'ant-design-vue';
  18. import { PageWrapper } from '/@/components/Page';
  19. import { Button } from '/@/components/Button';
  20. export default defineComponent({
  21. components: { BasicForm, CollapseContainer, PageWrapper, [Input.name]: Input, Button },
  22. setup() {
  23. const [register, { appendSchemaByField, removeSchemaByField, validate }] = useForm({
  24. schemas: [
  25. {
  26. field: 'field0a',
  27. component: 'Input',
  28. label: '字段0',
  29. colProps: {
  30. span: 8,
  31. },
  32. required: true,
  33. },
  34. {
  35. field: 'field0b',
  36. component: 'Input',
  37. label: '字段0',
  38. colProps: {
  39. span: 8,
  40. },
  41. required: true,
  42. },
  43. {
  44. field: '0',
  45. component: 'Input',
  46. label: ' ',
  47. colProps: {
  48. span: 8,
  49. },
  50. slot: 'add',
  51. },
  52. ],
  53. labelWidth: 100,
  54. actionColOptions: { span: 24 },
  55. });
  56. async function handleSubmit() {
  57. try {
  58. const data = await validate();
  59. console.log(data);
  60. } catch (e) {
  61. console.log(e);
  62. }
  63. }
  64. const n = ref(1);
  65. function add() {
  66. appendSchemaByField(
  67. {
  68. field: `field${n.value}a`,
  69. component: 'Input',
  70. label: '字段' + n.value,
  71. colProps: {
  72. span: 8,
  73. },
  74. required: true,
  75. },
  76. '',
  77. );
  78. appendSchemaByField(
  79. {
  80. field: `field${n.value}b`,
  81. component: 'Input',
  82. label: '字段' + n.value,
  83. colProps: {
  84. span: 8,
  85. },
  86. required: true,
  87. },
  88. '',
  89. );
  90. appendSchemaByField(
  91. {
  92. field: `${n.value}`,
  93. component: 'Input',
  94. label: ' ',
  95. colProps: {
  96. span: 8,
  97. },
  98. slot: 'add',
  99. },
  100. '',
  101. );
  102. n.value++;
  103. }
  104. function del(field) {
  105. removeSchemaByField([`field${field}a`, `field${field}b`, `${field}`]);
  106. n.value--;
  107. }
  108. return { register, handleSubmit, add, del };
  109. },
  110. });
  111. </script>