Form - 表单

Form 在原来的 Antd Form 的基础上增加了一些语法糖，快速开发表单。

如果只是想要设置默认值，请使用 initialValues
如果想要监听某个值，建议使用 onValuesChange
Form 只是 Antd Form 的封装，如果要使用自定义的组件可以用 Antd Form.Item 包裹后使用，支持混用

基本用法

显示代码

jsx

import { defineComponent } from 'vue'
import { Button } from 'ant-design-vue'
import { Date, Form, Number, Select, Text } from '@/components/form'

export default defineComponent({
    setup () {
        const initialValues = {
            text: 'default name'
        }

        function onValuesChange (values) {
            console.log(values)
        }

        function onFinish (values) {
            console.log(values)
        }

        return () => {
            return (
                <Form
                    initialValues={initialValues}
                    onValuesChange={onValuesChange}
                    onFinish={onFinish}
                >
                    <Text
                        width={365}
                        label={'文本'}
                        name={'text'}
                        required={true}
                    />
                    <Number
                        width={'sm'}
                        label={'数字'}
                        name={'number'}
                    />
                    <Date
                        width={'sm'}
                        label={'时间'}
                        name={'datePicker'}
                    />
                    <Select
                        width={'sm'}
                        label={'选择'}
                        name={'select'}
                        valueEnum={{ '1': '选项一', '2': '选项二' }}
                    />
                    <Button html-type={'submit'}>提交</Button>
                </Form>
            )
        }
    }
})

布局

显示代码

jsx

import { defineComponent, ref, unref } from 'vue'
import { Radio } from 'ant-design-vue'
import { Form, Number, Text } from '@/components/form'

export default defineComponent({
    setup () {
        const layout = ref('horizontal')

        return () => {
            return (
                <div>
                    <div style={{ marginBottom: '24px' }}>
                        <span>标签布局: </span>
                        <Radio.Group v-model={[layout.value, 'value']}>
                            <Radio.Button value={'horizontal'}>horizontal</Radio.Button>
                            <Radio.Button value={'vertical'}>vertical</Radio.Button>
                            <Radio.Button value={'inline'}>inline</Radio.Button>
                        </Radio.Group>
                    </div>
                    <Form layout={unref(layout)}>
                        <Text width={'sm'} label={'文本'}/>
                        <Number width={'sm'} label={'数字'}/>
                        <Form.Group title={'表单组'}>
                            <Text width={'xs'} label={'文本'}/>
                            <Number width={'xs'} label={'数字'}/>
                        </Form.Group>
                    </Form>
                </div>
            )
        }
    }
})

栅格化布局

显示代码

jsx

import { defineComponent, ref, unref } from 'vue'
import { Radio } from 'ant-design-vue'
import { Form, Number, Text } from '@/components/form'

export default defineComponent({
    setup () {
        const span = ref(6)

        return () => {
            return (
                <div>
                    <div style={{ marginBottom: '24px' }}>
                        <span>Span: </span>
                        <Radio.Group v-model={[span.value, 'value']}>
                            <Radio.Button value={6}>6</Radio.Button>
                            <Radio.Button value={12}>12</Radio.Button>
                            <Radio.Button value={24}>24</Radio.Button>
                        </Radio.Group>
                    </div>
                    <Form grid={true}>
                        <Text label={'文本'} colProps={{ span: unref(span) }}/>
                        <Number label={'数字'} colProps={{ span: unref(span) }}/>
                        <Form.Group title={'表单组'}>
                            <Text label={'文本'} colProps={{ span: unref(span) }}/>
                            <Number label={'数字'} colProps={{ span: unref(span) }}/>
                        </Form.Group>
                    </Form>
                </div>
            )
        }
    }
})

嵌套结构

显示代码

jsx

import { defineComponent } from 'vue'
import { Form, Number, Text } from '@/components/form'
import { Button } from 'ant-design-vue'

export default defineComponent({
    setup () {
        function onFinish (values) {
            console.log(values)
        }

        return () => {
            return (
                <Form onFinish={onFinish}>
                    <Number
                        width={'sm'}
                        label={'数字'}
                        name={['data', 'number']}
                    />
                    <Text
                        width={'sm'}
                        label={'文本'}
                        name={['data', 'text']}
                    />
                    {[0, 1, 2, 3].map((index) => {
                        return (
                            <Text
                                width={'sm'}
                                label={'文本-' + index}
                                name={['data', 'arr', index, 'text']}
                            />
                        )
                    })}
                    <Button html-type={'submit'}>提交</Button>
                </Form>
            )
        }
    }
})

自定义提交

显示代码

jsx

import { defineComponent, ref, unref } from 'vue'
import { Form, Submitter, Text } from '@/components/form'

export default defineComponent({
    setup () {
        const formRef = ref(null)

        function onFinish (values) {
            console.log(values)
        }

        function onSubmit () {
            const context = unref(formRef)
            if (context && context.getFormInstance) {
                const formInstance = context.getFormInstance()
                formInstance && formInstance.submit()
            }
        }

        return () => {
            return (
                <Form
                    ref={formRef}
                    onFinish={onFinish}
                >
                    <Text
                        width={365}
                        label={'文本'}
                        name={'text'}
                        required={true}
                    />
                    <Submitter onSubmit={onSubmit}/>
                </Form>
            )
        }
    }
})

数据验证

显示代码

jsx

import { defineComponent } from 'vue'
import { Form, Number, Text } from '@/components/form'
import { Button } from 'ant-design-vue'

export default defineComponent({
    setup () {
        function onFinish (values) {
            console.log(values)
        }

        return () => {
            return (
                <Form onFinish={onFinish}>
                    <Text
                        width={'sm'}
                        label={'文本'}
                        name={'text'}
                        required={true}
                    />
                    <Number
                        width={'sm'}
                        label={'数字-自定义校验'}
                        name={'number'}
                        rules={{
                            required: true,
                            validator: (rule, value, callback) => {
                                console.log(value)
                                if (value && value > 100) {
                                    return Promise.resolve()
                                } else {
                                    return Promise.reject('需要大于100')
                                }
                            }
                        }}
                    />
                    <Number
                        width={'sm'}
                        label={'数字'}
                        name={['data', 'number']}
                        required={true}
                    />
                    <Button html-type={'submit'}>提交</Button>
                </Form>
            )
        }
    }
})

数据联动

显示代码

jsx

import { defineComponent } from 'vue'
import { Form, Number, Text } from '@/components/form'

export default defineComponent({
    setup () {
        return () => {
            return (
                <Form>
                    <Number
                        width={'sm'}
                        label={'数字'}
                        name={'number'}
                    />
                    <Text
                        width={'sm'}
                        label={'文本'}
                        name={['data', 'text']}
                    />
                    <Form.Dependency name={['number', ['data', 'text']]}>
                        {(slotScope) => {
                            return '输入的内容是: ' + JSON.stringify(slotScope)
                        }}
                    </Form.Dependency>
                </Form>
            )
        }
    }
})

API

属性

属性	说明	类型	默认值
initialValues	初始值 key 对应 Form.Item name	object	-
submitOnReset	提交后是否重置表单数据	boolean	false
grid	开启 grid 模式	boolean	false
rowProps	grid 模式下传递给 Antd Row	object	{ gutter: [32, 0] }
transform	onFinish 前对数据的处理	(values: object) => object	-

事件

事件名称	说明	回调参数
onValuesChange	数据变化时回调	function(values)
onSubmit	提交时触发	function(event)
onFinish	提交并且校验通过的回调	function(values)
onReset	重置表单回调	function(values)

方法

名称	描述	参数
getFormInstance	获取 Form 实例	() => void

Form 实例

名称	描述	参数
formInstanceRef	Form 实例对象	-
model	表单数据	-
formProps	Form props	-
setModelValue	设置表单数据	(namePath: string \| array, value) => object
getModelValue	获取表单数据	(namePath: string \| array) => value
updateModelValue	更新表单数据	(namePath: string \| array, updater: (value) => value) => object
deleteModelValue	删除表单数据	(namePath: string \| array) => void
submit	提交表单	() => void
validate	校验表单	(names?: array) => Promise(object)
resetFields	重置部分表单	(names: array) => void
resetForm	重置整个表单	() => void

Submitter

属性

属性	说明	类型	默认值
loading	确认按钮的记载状态	boolean	false
space	两个按钮的间距	number	8
submitText	确认按钮的文本	string	'提交'
resetText	重置按钮的文本	string	'重置'
submitButtonProps	确认按钮的 props	object	-
resetButtonProps	重置按钮的 props	object	-

事件

事件名称	说明	回调参数
onSubmit	点击提交事件	function(event)
onReset	点击重置事件	function(event)
onKeyPress	键盘事件	function(event)

Form.Group

属性	说明	类型	默认值
title	表单组的 title	string \| Slot	-

Form.Dependency

属性	说明	类型	默认值
name	需要拿到的 namePath	array	-
colProps	Col 的参数 props	object	-

Form - 表单

基本用法 ​

布局 ​

栅格化布局 ​

嵌套结构 ​

自定义提交 ​

数据验证 ​

数据联动 ​

API ​

属性 ​

事件 ​

方法 ​

Form 实例 ​

Submitter ​

属性 ​

事件 ​

Form.Group ​

Form.Dependency ​

基本用法

布局

栅格化布局

嵌套结构

自定义提交

数据验证

数据联动

API

属性

事件

方法

Form 实例

Submitter

属性

事件

Form.Group

Form.Dependency