ArrayItems
自增列表，对于简单的自增编辑场景比较适合，或者对于空间要求高的场景比较适合
注意
该组件只适用于 Schema 场景。
Markup Schema 案例
vue
<script lang="ts" setup>
import { createForm } from '@formily/core'
import { createSchemaField, FormProvider } from '@formily/vue'
import {
ArrayItems,
DatePicker,
FormButtonGroup,
FormItem,
Input,
Select,
Space,
Submit,
} from '@silver-formily/element-plus'
const {
SchemaField,
SchemaArrayField,
SchemaObjectField,
SchemaVoidField,
SchemaStringField,
} = createSchemaField({
components: {
FormItem,
Space,
Input,
Select,
DatePicker,
ArrayItems,
},
})
const form = createForm()
async function log(values) {
console.log(values)
}
</script>
<template>
<FormProvider :form="form">
<SchemaField>
<SchemaArrayField
name="string_array"
title="字符串数组"
x-decorator="FormItem"
x-component="ArrayItems"
>
<SchemaVoidField x-component="Space">
<SchemaVoidField
x-decorator="FormItem"
x-component="ArrayItems.SortHandle"
/>
<SchemaStringField
x-decorator="FormItem"
required
name="input"
x-component="Input"
:x-component-props="{
style: {
width: '160px',
},
}"
/>
<SchemaVoidField
x-decorator="FormItem"
x-component="ArrayItems.Remove"
/>
</SchemaVoidField>
<SchemaVoidField x-component="ArrayItems.Addition" title="添加条目" />
</SchemaArrayField>
<SchemaArrayField
name="array"
title="对象数组"
x-decorator="FormItem"
x-component="ArrayItems"
>
<SchemaObjectField>
<SchemaVoidField x-component="Space">
<SchemaVoidField
x-decorator="FormItem"
x-component="ArrayItems.SortHandle"
/>
<SchemaStringField
x-decorator="FormItem"
required
title="日期"
name="date"
x-component="DatePicker"
:x-component-props="{
type: 'daterange',
style: {
width: '160px',
},
}"
/>
<SchemaStringField
x-decorator="FormItem"
required
title="输入框"
name="input"
x-component="Input"
/>
<SchemaStringField
x-decorator="FormItem"
required
title="选择框"
name="select"
:enum="[
{ label: '选项1', value: 1 },
{ label: '选项2', value: 2 },
]"
x-component="Select"
:x-component-props="{
style: {
width: 160,
},
}"
/>
<SchemaVoidField
x-decorator="FormItem"
x-component="ArrayItems.Remove"
/>
</SchemaVoidField>
</SchemaObjectField>
<SchemaVoidField x-component="ArrayItems.Addition" title="添加条目" />
</SchemaArrayField>
<SchemaArrayField
name="array2"
title="对象数组"
x-decorator="FormItem"
x-component="ArrayItems"
:x-component-props="{ style: { width: '600px' } }"
>
<SchemaObjectField x-decorator="ArrayItems.Item">
<SchemaVoidField x-component="Space" :x-component-props="{ style: { paddingTop: '18px' } }">
<SchemaVoidField
x-decorator="FormItem"
x-component="ArrayItems.SortHandle"
/>
<SchemaStringField
x-decorator="FormItem"
required
title="日期"
name="date"
x-component="DatePicker"
:x-component-props="{
type: 'daterange',
style: {
width: '250px',
},
}"
/>
<SchemaStringField
x-decorator="FormItem"
required
title="输入框"
name="input"
x-component="Input"
/>
<SchemaVoidField
x-decorator="FormItem"
x-component="ArrayItems.Remove"
/>
</SchemaVoidField>
</SchemaObjectField>
<SchemaVoidField x-component="ArrayItems.Addition" title="添加条目" />
</SchemaArrayField>
</SchemaField>
<FormButtonGroup>
<Submit @submit="log">
提交
</Submit>
</FormButtonGroup>
</FormProvider>
</template>JSON Schema 案例
vue
<script lang="ts" setup>
import { createForm } from '@formily/core'
import { createSchemaField, FormProvider } from '@formily/vue'
import {
ArrayItems,
DatePicker,
Editable,
FormItem,
Input,
Select,
Space,
Submit,
} from '@silver-formily/element-plus'
const { SchemaField } = createSchemaField({
components: {
FormItem,
Space,
Editable,
Input,
Select,
DatePicker,
ArrayItems,
},
})
const form = createForm()
const schema = {
type: 'object',
properties: {
string_array: {
'type': 'array',
'x-component': 'ArrayItems',
'x-decorator': 'FormItem',
'title': '字符串数组',
'items': {
'type': 'void',
'x-component': 'Space',
'properties': {
sort: {
'type': 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.SortHandle',
},
input: {
'type': 'string',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
remove: {
'type': 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.Remove',
},
},
},
'properties': {
add: {
'type': 'void',
'title': '添加条目',
'x-component': 'ArrayItems.Addition',
},
},
},
array: {
'type': 'array',
'x-component': 'ArrayItems',
'x-decorator': 'FormItem',
'title': '对象数组',
'items': {
type: 'object',
properties: {
space: {
'type': 'void',
'x-component': 'Space',
'x-component-props': { style: { paddingTop: '18px' } },
'properties': {
sort: {
'type': 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.SortHandle',
},
date: {
'type': 'string',
'title': '日期',
'x-decorator': 'FormItem',
'x-component': 'DatePicker',
'x-component-props': {
type: 'daterange',
style: {
width: '250px',
},
},
},
input: {
'type': 'string',
'title': '输入框',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
select: {
'type': 'string',
'title': '下拉框',
'enum': [
{ label: '选项1', value: 1 },
{ label: '选项2', value: 2 },
],
'x-decorator': 'FormItem',
'x-component': 'Select',
'x-component-props': {
style: {
width: '250px',
},
},
},
remove: {
'type': 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.Remove',
},
},
},
},
},
'properties': {
add: {
'type': 'void',
'title': '添加条目',
'x-component': 'ArrayItems.Addition',
},
},
},
array2: {
'type': 'array',
'x-component': 'ArrayItems',
'x-decorator': 'FormItem',
'x-component-props': { style: { width: '600px' } },
'title': '对象数组',
'items': {
'type': 'object',
'x-decorator': 'ArrayItems.Item',
'properties': {
space: {
'type': 'void',
'x-component': 'Space',
'properties': {
sort: {
'type': 'void',
'x-component': 'ArrayItems.SortHandle',
},
date: {
'type': 'string',
'title': '日期',
'x-decorator': 'Editable',
'x-component': 'DatePicker',
},
iobject: {
'type': 'object',
'title': '对象节点容器',
'x-component': 'Editable.Popover',
'x-reactions':
'{{(field) => field.title = field.value && field.value.date || field.title}}',
'properties': {
date: {
'type': 'string',
'title': '日期',
'x-decorator': 'FormItem',
'x-component': 'DatePicker',
},
input: {
'type': 'string',
'title': '输入框',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
},
},
remove: {
'type': 'void',
'x-component': 'ArrayItems.Remove',
},
},
},
},
},
'properties': {
add: {
'type': 'void',
'title': '添加条目',
'x-component': 'ArrayItems.Addition',
},
},
},
},
}
async function log(values) {
console.log(values)
}
</script>
<template>
<FormProvider :form="form">
<SchemaField :schema="schema" />
<Submit @submit="log">
提交
</Submit>
</FormProvider>
</template>
<style lang="scss" scoped></style>JSON Schema 数组item案例
vue
<script lang="ts" setup>
import { createForm } from '@formily/core'
import { createSchemaField, FormProvider } from '@formily/vue'
import {
ArrayItems,
DatePicker,
Editable,
FormItem,
Input,
Select,
Space,
Submit,
} from '@silver-formily/element-plus'
const { SchemaField } = createSchemaField({
components: {
FormItem,
Space,
Editable,
Input,
Select,
DatePicker,
ArrayItems,
},
})
const form = createForm({
initialValues: {
string_array: ['', ''],
},
})
const schema = {
type: 'object',
properties: {
string_array: {
'type': 'array',
'x-component': 'ArrayItems',
'x-decorator': 'FormItem',
'title': '字符串数组',
'items': [
{
'type': 'void',
'x-component': 'Space',
'properties': {
sort: {
'type': 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.SortHandle',
},
input: {
'type': 'string',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
remove: {
'type': 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.Remove',
},
},
},
{
'type': 'void',
'x-component': 'Space',
'properties': {
sort: {
'type': 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.SortHandle',
},
input: {
'type': 'string',
'x-decorator': 'FormItem',
'x-component': 'DatePicker',
},
remove: {
'type': 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.Remove',
},
},
},
],
'properties': {
add: {
'type': 'void',
'title': '添加条目',
'x-component': 'ArrayItems.Addition',
},
},
},
},
}
async function log(values) {
console.log(values)
}
</script>
<template>
<FormProvider :form="form">
<SchemaField :schema="schema" />
<Submit @submit="log">
提交
</Submit>
</FormProvider>
</template>
<style lang="scss" scoped></style>API
ArrayItems
继承 HTMLDivElement Props
ArrayItems.Item
列表区块
继承 HTMLDivElement Props
ArrayItems.SortHandle
参考ArrayBase.SortHandle
ArrayItems.Addition
参考ArrayBase.Addition