ArrayItems
Incremental list, suitable for simpler append/remove editing scenarios or layouts with tight space constraints.
Note
This component is intended for Schema-based scenarios only.
Markup Schema Example
<script lang="ts" setup>
import { createForm } from '@silver-formily/core'
import {
ArrayItems,
DatePicker,
FormButtonGroup,
FormItem,
Input,
Select,
Space,
Submit,
} from '@silver-formily/element-plus'
import { createSchemaField, FormProvider } from '@silver-formily/vue'
const {
SchemaField,
SchemaArrayField,
SchemaObjectField,
SchemaVoidField,
SchemaStringField,
} = createSchemaField({
components: {
FormItem,
Space,
Input,
Select,
DatePicker,
ArrayItems,
},
})
const form = createForm()
async function log(values: Record<string, any>) {
console.log(values)
}
</script>
<template>
<FormProvider :form="form">
<SchemaField>
<SchemaArrayField
name="string_array"
title="String Array"
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="Add Item" />
</SchemaArrayField>
<SchemaArrayField
name="array"
title="Object Array"
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="Date"
name="date"
x-component="DatePicker"
:x-component-props="{
type: 'daterange',
style: {
width: '160px',
},
}"
/>
<SchemaStringField
x-decorator="FormItem"
required
title="Input"
name="input"
x-component="Input"
/>
<SchemaStringField
x-decorator="FormItem"
required
title="Select"
name="select"
:enum="[
{ label: 'Option 1', value: 1 },
{ label: 'Option 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="Add Item" />
</SchemaArrayField>
<SchemaArrayField
name="array2"
title="Object Array"
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="Date"
name="date"
x-component="DatePicker"
:x-component-props="{
type: 'daterange',
style: {
width: '250px',
},
}"
/>
<SchemaStringField
x-decorator="FormItem"
required
title="Input"
name="input"
x-component="Input"
/>
<SchemaVoidField
x-decorator="FormItem"
x-component="ArrayItems.Remove"
/>
</SchemaVoidField>
</SchemaObjectField>
<SchemaVoidField x-component="ArrayItems.Addition" title="Add Item" />
</SchemaArrayField>
</SchemaField>
<FormButtonGroup>
<Submit @submit="log">
Submit
</Submit>
</FormButtonGroup>
</FormProvider>
</template>JSON Schema Example
<script lang="ts" setup>
import { createForm } from '@silver-formily/core'
import {
ArrayItems,
DatePicker,
Editable,
FormItem,
Input,
Select,
Space,
Submit,
} from '@silver-formily/element-plus'
import { createSchemaField, FormProvider } from '@silver-formily/vue'
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': 'String Array',
'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': 'Add Item',
'x-component': 'ArrayItems.Addition',
},
},
},
array: {
'type': 'array',
'x-component': 'ArrayItems',
'x-decorator': 'FormItem',
'title': 'Object Array',
'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': 'Date',
'x-decorator': 'FormItem',
'x-component': 'DatePicker',
'x-component-props': {
type: 'daterange',
style: {
width: '250px',
},
},
},
input: {
'type': 'string',
'title': 'Input',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
select: {
'type': 'string',
'title': 'Select',
'enum': [
{ label: 'Option 1', value: 1 },
{ label: 'Option 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': 'Add Item',
'x-component': 'ArrayItems.Addition',
},
},
},
array2: {
'type': 'array',
'x-component': 'ArrayItems',
'x-decorator': 'FormItem',
'x-component-props': { style: { width: '600px' } },
'title': 'Object Array',
'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': 'Date',
'x-decorator': 'Editable',
'x-component': 'DatePicker',
},
iobject: {
'type': 'object',
'title': 'Object Node Container',
'x-component': 'Editable.Popover',
'x-reactions':
'{{(field) => field.title = field.value && field.value.date || field.title}}',
'properties': {
date: {
'type': 'string',
'title': 'Date',
'x-decorator': 'FormItem',
'x-component': 'DatePicker',
},
input: {
'type': 'string',
'title': 'Input',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
},
},
remove: {
'type': 'void',
'x-component': 'ArrayItems.Remove',
},
},
},
},
},
'properties': {
add: {
'type': 'void',
'title': 'Add Item',
'x-component': 'ArrayItems.Addition',
},
},
},
},
}
async function log(values: Record<string, any>) {
console.log(values)
}
</script>
<template>
<FormProvider :form="form">
<SchemaField :schema="schema" />
<Submit @submit="log">
Submit
</Submit>
</FormProvider>
</template>
<style lang="scss" scoped></style>JSON Schema Array Item Example
<script lang="ts" setup>
import { createForm } from '@silver-formily/core'
import {
ArrayItems,
DatePicker,
Editable,
FormItem,
Input,
Select,
Space,
Submit,
} from '@silver-formily/element-plus'
import { createSchemaField, FormProvider } from '@silver-formily/vue'
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': 'String Array',
'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': 'Add Item',
'x-component': 'ArrayItems.Addition',
},
},
},
},
}
async function log(values: Record<string, any>) {
console.log(values)
}
</script>
<template>
<FormProvider :form="form">
<SchemaField :schema="schema" />
<Submit @submit="log">
Submit
</Submit>
</FormProvider>
</template>
<style lang="scss" scoped></style>API
ArrayItems
Inherits HTMLDivElement props
ArrayItems.Item
List block
Inherits HTMLDivElement props
ArrayItems.SortHandle
See ArrayBase.SortHandle
ArrayItems.Addition
See ArrayBase.Addition
ArrayItems.Remove
See ArrayBase.Remove
ArrayItems.MoveDown
ArrayItems.MoveUp
See ArrayBase.MoveUp
ArrayItems.Index
See ArrayBase.Index