| 提交 | 用户 | age | ||
| 2f6253 | 1 | <template> |
| 陈 | 2 | <div class="m-4"> |
| 3 | <CollapseContainer title="自定义表单"> | |
| 1d4561 | 4 | <BasicForm @register="register" @submit="handleSubmit"> |
| V | 5 | <template #f3="{ model, field }"> |
| 6 | <a-input v-model:value="model[field]" placeholder="自定义slot" /> | |
| 7 | </template> | |
| 8 | </BasicForm> | |
| 2f6253 | 9 | </CollapseContainer> |
| 陈 | 10 | </div> |
| 11 | </template> | |
| 12 | <script lang="ts"> | |
| 13 | import { defineComponent, h } from 'vue'; | |
| 14 | import { BasicForm, FormSchema, useForm } from '/@/components/Form/index'; | |
| 15 | import { CollapseContainer } from '/@/components/Container/index'; | |
| 16 | import { useMessage } from '/@/hooks/web/useMessage'; | |
| 17 | import { Input } from 'ant-design-vue'; | |
| 18 | const schemas: FormSchema[] = [ | |
| 19 | { | |
| 20 | field: 'field1', | |
| 21 | component: 'Input', | |
| 1d4561 | 22 | label: 'render方式', |
| 2f6253 | 23 | colProps: { |
| 陈 | 24 | span: 8, |
| 25 | }, | |
| 26 | rules: [{ required: true }], | |
| 27 | render: ({ model, field }) => { | |
| 28 | return h(Input, { | |
| 29 | placeholder: '请输入', | |
| 30 | value: model[field], | |
| 31 | onChange: (e: ChangeEvent) => { | |
| 32 | model[field] = e.target.value; | |
| 33 | }, | |
| 34 | }); | |
| 35 | }, | |
| 36 | }, | |
| 37 | { | |
| 38 | field: 'field2', | |
| 39 | component: 'Input', | |
| 1d4561 | 40 | label: 'render组件slot', |
| 2f6253 | 41 | colProps: { |
| 陈 | 42 | span: 8, |
| 43 | }, | |
| 44 | rules: [{ required: true }], | |
| 45 | renderComponentContent: () => { | |
| 46 | return { | |
| 47 | suffix: () => 'suffix', | |
| 48 | }; | |
| 49 | }, | |
| 50 | }, | |
| 1d4561 | 51 | { |
| V | 52 | field: 'field3', |
| 53 | component: 'Input', | |
| 54 | label: '自定义Slot', | |
| 55 | slot: 'f3', | |
| 56 | colProps: { | |
| 57 | span: 8, | |
| 58 | }, | |
| 59 | rules: [{ required: true }], | |
| 60 | }, | |
| 2f6253 | 61 | ]; |
| 陈 | 62 | export default defineComponent({ |
| 63 | components: { BasicForm, CollapseContainer }, | |
| 64 | setup() { | |
| 65 | const { createMessage } = useMessage(); | |
| 66 | const [register, { setProps }] = useForm({ | |
| 67 | labelWidth: 120, | |
| 68 | schemas, | |
| 69 | actionColOptions: { | |
| 70 | span: 24, | |
| 71 | }, | |
| 72 | }); | |
| 73 | return { | |
| 74 | register, | |
| 75 | schemas, | |
| 76 | handleSubmit: (values: any) => { | |
| 77 | createMessage.success('click search,values:' + JSON.stringify(values)); | |
| 78 | }, | |
| 79 | setProps, | |
| 80 | }; | |
| 81 | }, | |
| 82 | }); | |
| 83 | </script> | |
