# FormItem
全新的 FormItem 组件，相比于 Element 的 FormItem，它支持的功能更多，同时它的定位是纯样式组件，不管理表单状态，所以也会更轻量，更方便定制
# Markup Schema 案例
<template>
<Form :form="form">
<SchemaField>
<SchemaStringField
name="input"
title="输入框"
x-decorator="FormItem"
x-component="Input"
required
/>
</SchemaField>
<Submit @submit="onSubmit">提交</Submit>
</Form>
</template>
<script>
import { createForm } from '@formily/core'
import { createSchemaField } from '@formily/vue'
import { Form, FormItem, Input, Submit } from '@formily/antdv'
const form = createForm()
const fields = createSchemaField({
components: {
FormItem,
Input,
},
})
export default {
components: { Form, ...fields, Submit },
data() {
return {
form,
}
},
methods: {
onSubmit(value) {
console.log(value)
},
},
}
</script>
# JSON Schema 案例
<template>
<Form :form="form">
<SchemaField :schema="schema" />
<Submit @submit="onSubmit">提交</Submit>
</Form>
</template>
<script>
import { createForm } from '@formily/core'
import { createSchemaField } from '@formily/vue'
import { Form, FormItem, Input, Submit } from '@formily/antdv'
const schema = {
type: 'object',
properties: {
input: {
type: 'string',
title: '输入框',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
},
}
const form = createForm()
const { SchemaField } = createSchemaField({
components: {
FormItem,
Input,
},
})
export default {
components: { Form, SchemaField, Submit },
data() {
return {
form,
schema,
}
},
methods: {
onSubmit(value) {
console.log(value)
},
},
}
</script>
# Template 案例
<template>
<Form :form="form">
<Field
name="input"
title="输入框"
:decorator="[FormItem]"
:component="[Input]"
required
/>
<Submit @submit="onSubmit">提交</Submit>
</Form>
</template>
<script>
import { createForm } from '@formily/core'
import { Field } from '@formily/vue'
import { Form, FormItem, Input, Submit } from '@formily/antdv'
const form = createForm()
export default {
components: { Form, Field, Submit },
data() {
return {
FormItem,
Input,
form,
}
},
methods: {
onSubmit(value) {
console.log(value)
},
},
}
</script>
# 常用属性案例
label为空时的展示:
冒号:
:
固定宽度设置:
:
:
描述描述
:
描述描述
:
对齐方式设置:
:
:
:
:
:
:
是否撑满:
:
:
辅助信息:
*
::
addonBefore
:
addonAfter
:
feedbackText
:
feedbackText
extra
表单状态:
:
description
:
description
:
description
:
description
反馈信息的布局:
*
::
error message
:
:
error message
:
warning message
:
error message
:
success message
组件的适配情况:
:
:
:
:
:
:
:
:
<template>
<FormProvider :form="form">
<SchemaField>
<SchemaVoidField x-component="Title" x-content="label为空时的展示: " />
<SchemaStringField
x-decorator="FormItem"
x-component="Input"
:x-decorator-props="{
labelWidth: 300,
}"
/>
<SchemaStringField
title=""
x-decorator="FormItem"
x-component="Input"
:x-decorator-props="{
labelWidth: 300,
}"
/>
<SchemaVoidField x-component="Title" x-content="冒号: " />
<SchemaStringField
title="默认"
x-decorator="FormItem"
x-component="Input"
/>
<SchemaStringField
title="无冒号(colon=false)"
x-decorator="FormItem"
x-component="Input"
:x-decorator-props="{
colon: false,
}"
/>
<SchemaVoidField x-component="Title" x-content="固定宽度设置: " />
<SchemaStringField
title="固定label宽度(labelWidth)"
x-decorator="FormItem"
x-component="Input"
:x-decorator-props="{
labelWidth: 300,
}"
/>
<SchemaStringField
title="固定label宽度(labelWidth)溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出溢出"
description="描述描述"
x-decorator="FormItem"
x-component="Input"
:x-decorator-props="{
labelWidth: 300,
tooltip: '提示提示',
}"
/>
<SchemaStringField
title="固定label宽度(labelWidth)换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行"
description="描述描述"
x-decorator="FormItem"
x-component="Input"
:x-decorator-props="{
labelWidth: 300,
labelWrap: true,
tooltip: '提示提示',
}"
/>
<SchemaStringField
title="固定内容宽度(wrapperWidth)"
x-decorator="FormItem"
x-component="Input"
:x-decorator-props="{
labelWidth: 300,
wrapperWidth: 300,
}"
/>
<SchemaVoidField x-component="Title" x-content="对齐方式设置:" />
<SchemaStringField
title="label左对齐(labelAlign=left)"
x-decorator="FormItem"
x-component="Input"
:x-decorator-props="{
labelWidth: 300,
labelAlign: 'left',
}"
/>
<SchemaStringField
title="label右对齐(labelAlign=right默认)"
x-decorator="FormItem"
x-component="Input"
:x-decorator-props="{
labelWidth: 300,
labelAlign: 'right',
}"
/>
<SchemaStringField
title="内容左对齐(wrapperAlign=left默认)"
x-decorator="FormItem"
x-component="Input"
:x-decorator-props="{
labelWidth: 300,
wrapperWidth: 240,
wrapperAlign: 'left',
}"
/>
<SchemaStringField
title="内容右对齐(wrapperAlign=right)"
x-decorator="FormItem"
x-component="Input"
:x-decorator-props="{
labelWidth: 300,
wrapperWidth: 240,
wrapperAlign: 'right',
}"
/>
<SchemaStringField
title="tooltip"
x-decorator="FormItem"
x-component="Input"
:x-decorator-props="{
tooltip: 'tooltip',
}"
/>
<SchemaStringField
title="tooltip"
x-decorator="FormItem"
x-component="Input"
:x-decorator-props="{
tooltip: 'tooltip',
tooltipLayout: 'text',
}"
/>
<SchemaVoidField x-component="Title" x-content="是否撑满: " />
<SchemaStringField
title="默认不撑满(fullness=false)"
x-decorator="FormItem"
x-component="Select"
/>
<SchemaStringField
title="撑满(fullness=true)"
x-decorator="FormItem"
x-component="Select"
:x-decorator-props="{
fullness: true,
}"
/>
<SchemaVoidField x-component="Title" x-content="辅助信息: " />
<SchemaStringField
title="必填星号"
x-decorator="FormItem"
x-component="Input"
:x-decorator-props="{
asterisk: true,
labelCol: 6,
wrapperCol: 10,
}"
/>
<SchemaStringField
title="前缀"
x-decorator="FormItem"
x-component="Input"
:x-decorator-props="{
addonBefore: 'addonBefore',
labelCol: 6,
wrapperCol: 10,
}"
/>
<SchemaStringField
title="后缀"
x-decorator="FormItem"
x-component="Input"
:x-decorator-props="{
addonAfter: 'addonAfter',
labelCol: 6,
wrapperCol: 10,
}"
/>
<SchemaStringField
title="帮助信息feedbackText"
x-decorator="FormItem"
x-component="Input"
:x-decorator-props="{
feedbackText: 'feedbackText',
labelCol: 6,
wrapperCol: 10,
}"
/>
<SchemaStringField
title="额外信息extra"
x-decorator="FormItem"
x-component="Input"
:x-decorator-props="{
feedbackText: 'feedbackText',
extra: 'extra',
labelCol: 6,
wrapperCol: 10,
}"
/>
<SchemaVoidField x-component="Title" x-content="表单状态: " />
<SchemaStringField
title="错误状态(feedbackStatus=error)"
x-decorator="FormItem"
x-component="Input"
description="description"
:x-decorator-props="{
feedbackStatus: 'error',
}"
/>
<SchemaStringField
title="警告状态(feedbackStatus=warning)"
x-decorator="FormItem"
x-component="Input"
description="description"
:x-decorator-props="{
feedbackStatus: 'warning',
}"
/>
<SchemaStringField
title="成功状态(feedbackStatus=success)"
x-decorator="FormItem"
x-component="Input"
description="description"
:x-decorator-props="{
feedbackStatus: 'success',
}"
/>
<SchemaStringField
title="加载状态(feedbackStatus=pending)"
x-decorator="FormItem"
x-component="Input"
description="description"
:x-decorator-props="{
feedbackStatus: 'pending',
}"
/>
<SchemaVoidField x-component="Title" x-content="反馈信息的布局: " />
<SchemaStringField
title="紧凑模式required"
x-decorator="FormItem"
x-component="Input"
:required="true"
:x-decorator-props="{
feedbackLayout: 'terse',
}"
/>
<SchemaStringField
title="紧凑模式有feedback(feedbackLayout=terse)"
x-decorator="FormItem"
x-component="Input"
:x-decorator-props="{
feedbackStatus: 'error',
feedbackText: 'error message',
feedbackLayout: 'terse',
}"
/>
<SchemaStringField
title="紧凑模式无feedback(feedbackLayout=terse)"
x-decorator="FormItem"
x-component="Input"
:x-decorator-props="{
feedbackLayout: 'terse',
}"
/>
<SchemaStringField
title="松散模式(feedbackLayout=loose)"
x-decorator="FormItem"
x-component="Input"
:x-decorator-props="{
feedbackStatus: 'error',
feedbackText: 'error message',
feedbackLayout: 'loose',
}"
/>
<SchemaStringField
title="弹出模式(feedbackLayout=popover)"
x-decorator="FormItem"
x-component="Input"
:x-decorator-props="{
feedbackStatus: 'warning',
feedbackText: 'warning message',
feedbackLayout: 'popover',
}"
/>
<SchemaStringField
title="弹出模式(feedbackLayout=popover)"
x-decorator="FormItem"
x-component="Input"
:x-decorator-props="{
feedbackStatus: 'error',
feedbackText: 'error message',
feedbackLayout: 'popover',
}"
/>
<SchemaStringField
title="弹出模式(feedbackLayout=popover)"
x-decorator="FormItem"
x-component="Input"
:x-decorator-props="{
feedbackStatus: 'success',
feedbackText: 'success message',
feedbackLayout: 'popover',
}"
/>
<SchemaVoidField x-component="Title" x-content="组件的适配情况: " />
<SchemaVoidField
x-component="FormLayout"
:x-component-props="{
labelCol: 6,
wrapperCol: 10,
}"
>
<SchemaStringField
title="Select"
x-decorator="FormItem"
x-component="Select"
:x-decorator-props="{
feedbackStatus: 'success',
feedbackIcon: SuccessIcon,
}"
/>
<SchemaStringField
title="DatePicker"
x-decorator="FormItem"
x-component="DatePicker"
:x-decorator-props="{
feedbackStatus: 'success',
feedbackIcon: SuccessIcon,
}"
/>
<SchemaStringField
title="DateRangePicker"
x-decorator="FormItem"
x-component="DatePicker"
:x-decorator-props="{
feedbackStatus: 'success',
feedbackIcon: SuccessIcon,
}"
:x-component-props="{
type: 'daterange',
}"
/>
<SchemaStringField
title="YearPicker"
x-decorator="FormItem"
x-component="DatePicker"
:x-decorator-props="{
feedbackStatus: 'success',
feedbackIcon: SuccessIcon,
}"
:x-component-props="{
type: 'year',
}"
/>
<SchemaStringField
title="MonthPicker"
x-decorator="FormItem"
x-component="DatePicker"
:x-decorator-props="{
feedbackStatus: 'success',
feedbackIcon: SuccessIcon,
}"
:x-component-props="{
type: 'month',
}"
/>
<SchemaStringField
title="TimePicker"
x-decorator="FormItem"
x-component="TimePicker"
:x-decorator-props="{
feedbackStatus: 'success',
feedbackIcon: SuccessIcon,
}"
/>
<SchemaStringField
title="InputNumber"
x-decorator="FormItem"
x-component="InputNumber"
:x-decorator-props="{
feedbackStatus: 'success',
feedbackIcon: SuccessIcon,
}"
/>
<SchemaStringField
title="Cascader"
x-decorator="FormItem"
x-component="Cascader"
:x-decorator-props="{
feedbackStatus: 'success',
feedbackIcon: SuccessIcon,
}"
/>
</SchemaVoidField>
</SchemaField>
</FormProvider>
</template>
<script>
import { createForm } from '@formily/core'
import { createSchemaField, FormProvider } from '@formily/vue'
import {
FormItem,
InputNumber,
Input,
Cascader,
Select,
DatePicker,
FormLayout,
TimePicker,
} from '@formily/antdv'
const SuccessIcon = {
functional: true,
render(h) {
return h('i', {
class: 'el-icon-circle-check',
style: { color: '#8AE65C' },
})
},
}
const Title = {
functional: true,
render(h, context) {
return h('p', context.data, context.children)
},
}
const fields = createSchemaField({
components: {
Title,
FormItem,
InputNumber,
Input,
Cascader,
Select,
DatePicker,
FormLayout,
TimePicker,
},
})
export default {
components: { FormProvider, ...fields },
data() {
const form = createForm()
return {
form,
SuccessIcon,
}
},
}
</script>
# 无边框案例
设置去除组件边框
<template>
<Form :form="form">
<SchemaField>
<SchemaStringField
name="input"
title="Input"
x-decorator="FormItem"
x-component="Input"
required
:x-decorator-props="{
bordered: false,
}"
/>
<SchemaStringField
name="Select"
title="Select"
x-decorator="FormItem"
x-component="Select"
required
:x-decorator-props="{
bordered: false,
}"
/>
<SchemaStringField
name="Cascader"
title="Cascader"
x-decorator="FormItem"
x-component="Cascader"
required
:x-decorator-props="{
bordered: false,
}"
/>
<SchemaStringField
name="DatePicker"
title="DatePicker"
x-decorator="FormItem"
x-component="DatePicker"
required
:x-decorator-props="{
bordered: false,
}"
/>
<SchemaStringField
name="InputNumber"
title="InputNumber"
x-decorator="FormItem"
x-component="InputNumber"
required
:x-decorator-props="{
bordered: false,
}"
/>
<SchemaBooleanField
name="Switch"
title="Switch"
x-decorator="FormItem"
x-component="Switch"
required
:x-decorator-props="{
bordered: false,
}"
/>
</SchemaField>
</Form>
</template>
<script>
import { createForm } from '@formily/core'
import { createSchemaField } from '@formily/vue'
import {
Form,
FormItem,
Input,
Select,
Cascader,
DatePicker,
Switch,
InputNumber,
} from '@formily/antdv'
const form = createForm()
const fields = createSchemaField({
components: {
FormItem,
Input,
Select,
Cascader,
DatePicker,
Switch,
InputNumber,
},
})
export default {
components: { Form, ...fields },
data() {
return {
form,
}
},
methods: {
onSubmit(value) {
console.log(value)
},
},
}
</script>
# 内嵌模式案例
设置表单组件为内嵌模式
<template>
<Form :form="form">
<SchemaField>
<SchemaStringField
name="input"
title="Input"
x-decorator="FormItem"
x-component="Input"
required
:x-decorator-props="{
inset: true,
}"
/>
<SchemaStringField
name="Select"
title="Select"
x-decorator="FormItem"
x-component="Select"
required
:x-decorator-props="{
inset: true,
}"
/>
<SchemaStringField
name="Cascader"
title="Cascader"
x-decorator="FormItem"
x-component="Cascader"
required
:x-decorator-props="{
inset: true,
}"
/>
<SchemaStringField
name="DatePicker"
title="DatePicker"
x-decorator="FormItem"
x-component="DatePicker"
required
:x-decorator-props="{
inset: true,
}"
/>
<SchemaStringField
name="InputNumber"
title="InputNumber"
x-decorator="FormItem"
x-component="InputNumber"
required
:x-decorator-props="{
inset: true,
}"
/>
<SchemaBooleanField
name="Switch"
title="Switch"
x-decorator="FormItem"
x-component="Switch"
required
:x-decorator-props="{
inset: true,
}"
/>
</SchemaField>
</Form>
</template>
<script>
import { createForm } from '@formily/core'
import { createSchemaField } from '@formily/vue'
import {
Form,
FormItem,
Input,
Select,
Cascader,
DatePicker,
Switch,
InputNumber,
} from '@formily/antdv'
const form = createForm()
const fields = createSchemaField({
components: {
FormItem,
Input,
Select,
Cascader,
DatePicker,
Switch,
InputNumber,
},
})
export default {
components: { Form, ...fields },
data() {
return {
form,
}
},
methods: {
onSubmit(value) {
console.log(value)
},
},
}
</script>
# 反馈信息定制案例
可通过 feedbackIcon 传入指定反馈的按钮
表单状态:
:
description
:
description
:
description
:
description
反馈信息的布局:
*
::
error message
:
:
error message
:
warning message
:
error message
:
success message
组件的适配情况:
:
:
:
:
:
:
:
:
<template>
<FormProvider :form="form">
<SchemaField>
<SchemaVoidField x-component="Title" x-content="表单状态: " />
<SchemaStringField
title="错误状态(feedbackStatus=error)"
x-decorator="FormItem"
x-component="Input"
description="description"
:x-decorator-props="{
feedbackStatus: 'error',
}"
/>
<SchemaStringField
title="警告状态(feedbackStatus=warning)"
x-decorator="FormItem"
x-component="Input"
description="description"
:x-decorator-props="{
feedbackStatus: 'warning',
}"
/>
<SchemaStringField
title="成功状态(feedbackStatus=success)"
x-decorator="FormItem"
x-component="Input"
description="description"
:x-decorator-props="{
feedbackStatus: 'success',
}"
/>
<SchemaStringField
title="加载状态(feedbackStatus=pending)"
x-decorator="FormItem"
x-component="Input"
description="description"
:x-decorator-props="{
feedbackStatus: 'pending',
}"
/>
<SchemaVoidField x-component="Title" x-content="反馈信息的布局: " />
<SchemaStringField
title="紧凑模式required"
x-decorator="FormItem"
x-component="Input"
:required="true"
:x-decorator-props="{
feedbackLayout: 'terse',
}"
/>
<SchemaStringField
title="紧凑模式有feedback(feedbackLayout=terse)"
x-decorator="FormItem"
x-component="Input"
:x-decorator-props="{
feedbackStatus: 'error',
feedbackText: 'error message',
feedbackLayout: 'terse',
}"
/>
<SchemaStringField
title="紧凑模式无feedback(feedbackLayout=terse)"
x-decorator="FormItem"
x-component="Input"
:x-decorator-props="{
feedbackLayout: 'terse',
}"
/>
<SchemaStringField
title="松散模式(feedbackLayout=loose)"
x-decorator="FormItem"
x-component="Input"
:x-decorator-props="{
feedbackStatus: 'error',
feedbackText: 'error message',
feedbackLayout: 'loose',
}"
/>
<SchemaStringField
title="弹出模式(feedbackLayout=popover)"
x-decorator="FormItem"
x-component="Input"
:x-decorator-props="{
feedbackStatus: 'warning',
feedbackText: 'warning message',
feedbackLayout: 'popover',
}"
/>
<SchemaStringField
title="弹出模式(feedbackLayout=popover)"
x-decorator="FormItem"
x-component="Input"
:x-decorator-props="{
feedbackStatus: 'error',
feedbackText: 'error message',
feedbackLayout: 'popover',
}"
/>
<SchemaStringField
title="弹出模式(feedbackLayout=popover)"
x-decorator="FormItem"
x-component="Input"
:x-decorator-props="{
feedbackStatus: 'success',
feedbackText: 'success message',
feedbackLayout: 'popover',
}"
/>
<SchemaVoidField x-component="Title" x-content="组件的适配情况: " />
<SchemaVoidField
x-component="FormLayout"
:x-component-props="{
labelCol: 6,
wrapperCol: 10,
}"
>
<SchemaStringField
title="Select"
x-decorator="FormItem"
x-component="Select"
:x-decorator-props="{
feedbackStatus: 'success',
feedbackIcon: SuccessIcon,
}"
/>
<SchemaStringField
title="DatePicker"
x-decorator="FormItem"
x-component="DatePicker"
:x-decorator-props="{
feedbackStatus: 'success',
feedbackIcon: SuccessIcon,
}"
/>
<SchemaStringField
title="DateRangePicker"
x-decorator="FormItem"
x-component="DatePicker"
:x-decorator-props="{
feedbackStatus: 'success',
feedbackIcon: SuccessIcon,
}"
:x-component-props="{
type: 'daterange',
}"
/>
<SchemaStringField
title="YearPicker"
x-decorator="FormItem"
x-component="DatePicker"
:x-decorator-props="{
feedbackStatus: 'success',
feedbackIcon: SuccessIcon,
}"
:x-component-props="{
type: 'year',
}"
/>
<SchemaStringField
title="MonthPicker"
x-decorator="FormItem"
x-component="DatePicker"
:x-decorator-props="{
feedbackStatus: 'success',
feedbackIcon: SuccessIcon,
}"
:x-component-props="{
type: 'month',
}"
/>
<SchemaStringField
title="TimePicker"
x-decorator="FormItem"
x-component="TimePicker"
:x-decorator-props="{
feedbackStatus: 'success',
feedbackIcon: SuccessIcon,
}"
/>
<SchemaStringField
title="InputNumber"
x-decorator="FormItem"
x-component="InputNumber"
:x-decorator-props="{
feedbackStatus: 'success',
feedbackIcon: SuccessIcon,
}"
/>
<SchemaStringField
title="Cascader"
x-decorator="FormItem"
x-component="Cascader"
:x-decorator-props="{
feedbackStatus: 'success',
feedbackIcon: SuccessIcon,
}"
/>
</SchemaVoidField>
</SchemaField>
</FormProvider>
</template>
<script>
import { createForm } from '@formily/core'
import { createSchemaField, FormProvider } from '@formily/vue'
import {
FormItem,
InputNumber,
Input,
Cascader,
Select,
DatePicker,
FormLayout,
TimePicker,
} from '@formily/antdv'
const SuccessIcon = {
functional: true,
render(h) {
return h('i', {
class: 'el-icon-circle-check',
style: { color: '#8AE65C' },
})
},
}
const Title = {
functional: true,
render(h, context) {
return h('p', context.data, context.children)
},
}
const fields = createSchemaField({
components: {
Title,
FormItem,
InputNumber,
Input,
Cascader,
Select,
DatePicker,
FormLayout,
TimePicker,
},
})
export default {
components: { FormProvider, ...fields },
data() {
const form = createForm()
return {
form,
SuccessIcon,
}
},
}
</script>
# 尺寸控制案例
<template>
<Form :form="form">
<SchemaField>
<SchemaStringField
name="size"
title="Radio.Group"
x-decorator="FormItem"
x-component="Radio.Group"
:enum="[
{ value: 'small', label: 'Small' },
{ value: 'default', label: 'Default' },
{ value: 'large', label: 'Large' },
]"
/>
<SchemaVoidField name="sizeWrap" x-component="Div">
<SchemaStringField
name="input"
title="Input"
x-decorator="FormItem"
x-component="Input"
required
/>
<SchemaStringField
name="select1"
title="Multiple Select"
x-decorator="FormItem"
x-component="Select"
:enum="[
{
label: '选项1',
value: 1,
},
{
label: '选项2',
value: 2,
},
]"
:x-component-props="{
multiple: true,
placeholder: '请选择',
}"
required
/>
<SchemaStringField
name="select2"
title="Select"
x-decorator="FormItem"
x-component="Select"
:enum="[
{
label: '选项1',
value: 1,
},
{
label: '选项2',
value: 2,
},
]"
:x-component-props="{
placeholder: '请选择',
}"
required
/>
<SchemaStringField
name="Cascader"
title="Cascader"
x-decorator="FormItem"
x-component="Cascader"
required
/>
<SchemaStringField
name="DatePicker"
title="DatePicker"
x-decorator="FormItem"
x-component="DatePicker"
required
/>
<SchemaStringField
name="InputNumber"
title="InputNumber"
x-decorator="FormItem"
x-component="InputNumber"
required
/>
<SchemaBooleanField
name="Switch"
title="Switch"
x-decorator="FormItem"
x-component="Switch"
required
/>
</SchemaVoidField>
</SchemaField>
</Form>
</template>
<script>
import { createForm, onFieldChange } from '@formily/core'
import { createSchemaField } from '@formily/vue'
import {
Form,
FormItem,
Input,
Select,
Cascader,
DatePicker,
Switch,
InputNumber,
Radio,
} from '@formily/antdv'
const Div = {
functional: true,
render(h, context) {
return h('div', context.data, context.children)
},
}
const form = createForm({
values: {
size: 'default',
},
effects: () => {
onFieldChange('size', ['value'], (field, form) => {
form.setFieldState('sizeWrap.*', (state) => {
if (state.decorator[1]) {
state.decorator[1].size = field.value
}
})
})
},
})
const fields = createSchemaField({
components: {
FormItem,
Input,
Select,
Cascader,
DatePicker,
Switch,
InputNumber,
Radio,
Div,
},
})
export default {
components: { Form, ...fields },
data() {
return {
form,
}
},
methods: {
onSubmit(value) {
console.log(value)
},
},
}
</script>
# API
# FormItem
| 属性名 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| style | CSSProperties | 样式 | - |
| label | String | Vue Component | 标签 | - |
| labelStyle | CSSProperties | 标签样式 | - |
| wrapperStyle | CSSProperties | 组件容器样式 | - |
| className | string | 组件样式类名 | - |
| colon | boolean | 冒号 | - |
| tooltip | String | Vue Component | 问号提示 | - |
| tooltipLayout | "icon" | "text" | 问提示布局 | "icon" |
| labelAlign | "left" | "right" | 标签文本对齐方式 | "right" |
| labelWrap | boolean | 标签换⾏，否则出现省略号，hover 有 tooltip | false |
| labelWidth | number | 标签固定宽度 | - |
| wrapperWidth | number | 内容固定宽度 | - |
| labelCol | number | 标签⽹格所占列数，和内容列数加起来总和为 24 | - |
| wrapperCol | number | 内容⽹格所占列数，和标签列数加起来总和为 24 | - |
| wrapperAlign | "left" | "right" | 内容文本对齐方式⻬ | "left" |
| wrapperWrap | boolean | 内容换⾏，否则出现省略号，hover 有 tooltip | false |
| fullness | boolean | 内容撑满 | false |
| addonBefore | String | Vue Component | 前缀内容 | - |
| addonAfter | String | Vue Component | 后缀内容 | - |
| size | "small" | "default" | "large" | 尺⼨ | - |
| extra | ReactNode | 扩展描述⽂案 | - |
| feedbackText | ReactNode | 反馈⽂案 | - |
| feedbackLayout | "loose" | "terse" | "popover" | "none" | 反馈布局 | - |
| feedbackStatus | "error" | "warning" | "success" | "pending" | 反馈布局 | - |
| feedbackIcon | string | 反馈图标 | - |
| required | boolean | 星号提醒 | - |
| asterisk | boolean | 星号提醒 | - |
| gridSpan | number | ⽹格布局占宽 | - |
# FormItem.BaseItem
纯样式组件，属性与 FormItem 一样，与 Formily Core 不做状态桥接，主要用于一些需要依赖 FormItem 的样式布局能力，但不希望接入 Field 状态的场景
← FormGrid FormLayout →