字节笔记本字节笔记本

Form-create 使用自定义布局

2022-04-01

Form-create 使用自定义布局来创建一个表单,包含日期选择器和时间选择器,以及一个输入数字字段,每个字段都有特定的配置和验证规则。

Form-create 使用自定义布局

<template>
    <form-create v-model:api="fApi" :rule="rule" :option="options"/>
</template>

<script>
    export default {
        data() {
            return {
                fApi: {},
                options: {
                    onSubmit: (formData) => {
                        alert(JSON.stringify(formData))
                    }
                },
                rule: [
                    {
                        type: 'row',
                        native: true,
                        children: [
                            {
                                type: 'datePicker',
                                title: '活动日期',
                                field: 'section_day',
                                value: ['2018-02-12', '2021-11-20'],
                                props: {
                                  picker: 'date',
                                  range: true
                                },
                                col: {
                                    span: 14
                                },
                                wrap: {
                                    labelCol: {
                                        span: 6,
                                    }
                                }

                            },
                            {
                                type: 'timePicker',
                                title: '活动时间',
                                field: 'section_time',
                                props: {
                                    placeholder: "请选择活动时间"
                                },
                                col: {
                                    span: 10
                                },
                                wrap: {
                                    labelCol: {
                                        span: 8,
                                    }
                                }
                            },
                        ]
                    },
                    {
                        type: 'inputNumber',
                        title: '排序',
                        field: 'sort',
                        value: 0,
                        props: {
                            precision: 2
                        },
                        validate: [{require: true, type: 'number', min: 10, message:'最小为10'}]
                    },
                ]
            }
        }
    }
</script>