ArrayCards
卡片列表，对于每行字段数量较多，联动较多的场景比较适合使用 ArrayCards
注意
该组件只适用于 Schema 场景。
Markup Schema 案例
vue
<script lang="ts" setup>
import { createForm } from '@formily/core'
import { createSchemaField, FormProvider } from '@formily/vue'
import { ArrayCards, FormItem, Input, Submit } from '@silver-formily/element-plus'
const form = createForm()
const {
SchemaField,
SchemaArrayField,
SchemaVoidField,
SchemaStringField,
SchemaObjectField,
} = createSchemaField({
components: {
FormItem,
Input,
ArrayCards,
},
})
async function log(values) {
console.log(values)
}
</script>
<template>
<FormProvider :form="form">
<SchemaField>
<SchemaArrayField
name="string_array"
:max-items="3"
x-decorator="FormItem"
x-component="ArrayCards"
:x-component-props="{
title: '字符串数组',
}"
>
<SchemaVoidField>
<SchemaVoidField x-component="ArrayCards.Index" />
<SchemaStringField
name="input"
x-decorator="FormItem"
title="Input"
required
x-component="Input"
/>
<SchemaVoidField x-component="ArrayCards.Remove" />
<SchemaVoidField x-component="ArrayCards.MoveUp" />
<SchemaVoidField x-component="ArrayCards.MoveDown" />
</SchemaVoidField>
<SchemaVoidField x-component="ArrayCards.Addition" title="添加条目" />
</SchemaArrayField>
<SchemaArrayField
name="array"
:max-items="3"
x-decorator="FormItem"
x-component="ArrayCards"
:x-component-props="{
title: '对象数组',
}"
>
<SchemaObjectField>
<SchemaVoidField x-component="ArrayCards.Index" />
<SchemaStringField
name="input"
x-decorator="FormItem"
title="Input"
required
x-component="Input"
/>
<SchemaVoidField x-component="ArrayCards.Remove" />
<SchemaVoidField x-component="ArrayCards.MoveUp" />
<SchemaVoidField x-component="ArrayCards.MoveDown" />
</SchemaObjectField>
<SchemaVoidField x-component="ArrayCards.Addition" title="添加条目" />
</SchemaArrayField>
</SchemaField>
<Submit @submit="log">
提交
</Submit>
</FormProvider>
</template>
<style lang="scss" scoped></style>JSON Schema 案例
vue
<script lang="ts" setup>
import { createForm } from '@formily/core'
import { createSchemaField, FormProvider } from '@formily/vue'
import { ArrayCards, FormItem, Input, Submit } from '@silver-formily/element-plus'
const { SchemaField } = createSchemaField({
components: {
FormItem,
Input,
ArrayCards,
},
})
const form = createForm()
const schema = {
type: 'object',
properties: {
string_array: {
'type': 'array',
'x-component': 'ArrayCards',
'maxItems': 3,
'x-decorator': 'FormItem',
'x-component-props': {
title: '字符串数组',
},
'items': {
type: 'void',
properties: {
index: {
'type': 'void',
'x-component': 'ArrayCards.Index',
},
input: {
'type': 'string',
'x-decorator': 'FormItem',
'title': 'Input',
'required': true,
'x-component': 'Input',
},
remove: {
'type': 'void',
'x-component': 'ArrayCards.Remove',
},
moveUp: {
'type': 'void',
'x-component': 'ArrayCards.MoveUp',
},
moveDown: {
'type': 'void',
'x-component': 'ArrayCards.MoveDown',
},
},
},
'properties': {
addition: {
'type': 'void',
'title': '添加条目',
'x-component': 'ArrayCards.Addition',
},
},
},
array: {
'type': 'array',
'x-component': 'ArrayCards',
'maxItems': 3,
'x-decorator': 'FormItem',
'x-component-props': {
title: '对象数组',
},
'items': {
type: 'object',
properties: {
index: {
'type': 'void',
'x-component': 'ArrayCards.Index',
},
input: {
'type': 'string',
'x-decorator': 'FormItem',
'title': 'Input',
'required': true,
'x-component': 'Input',
},
remove: {
'type': 'void',
'x-component': 'ArrayCards.Remove',
},
moveUp: {
'type': 'void',
'x-component': 'ArrayCards.MoveUp',
},
moveDown: {
'type': 'void',
'x-component': 'ArrayCards.MoveDown',
},
},
},
'properties': {
addition: {
'type': 'void',
'title': '添加条目',
'x-component': 'ArrayCards.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 数组items案例
vue
<script lang="ts" setup>
import { createForm } from '@formily/core'
import { createSchemaField, FormProvider } from '@formily/vue'
import { ArrayCards, DatePicker, FormItem, Input, Submit } from '@silver-formily/element-plus'
const { SchemaField } = createSchemaField({
components: {
FormItem,
Input,
DatePicker,
ArrayCards,
},
})
const form = createForm({
initialValues: {
string_array: ['', ''],
},
})
const schema = {
type: 'object',
properties: {
string_array: {
'type': 'array',
'x-component': 'ArrayCards',
'x-decorator': 'FormItem',
'x-component-props': {
title: '字符串数组',
},
'items': [
{
type: 'void',
title: '11111',
properties: {
index: {
'type': 'void',
'x-component': 'ArrayCards.Index',
},
input: {
'type': 'string',
'x-decorator': 'FormItem',
'title': 'Input',
'x-component': 'Input',
'x-component-props': {
placeholder: '输入字符串',
},
},
remove: {
'type': 'void',
'x-component': 'ArrayCards.Remove',
},
moveUp: {
'type': 'void',
'x-component': 'ArrayCards.MoveUp',
},
moveDown: {
'type': 'void',
'x-component': 'ArrayCards.MoveDown',
},
},
},
{
type: 'void',
title: '22222',
properties: {
index: {
'type': 'void',
'x-component': 'ArrayCards.Index',
},
input: {
'type': 'string',
'x-decorator': 'FormItem',
'title': 'DatePicker',
'x-component': 'DatePicker',
'x-component-props': {
placeholder: '选择日期',
},
},
remove: {
'type': 'void',
'x-component': 'ArrayCards.Remove',
},
},
},
],
'properties': {
addition: {
'type': 'void',
'title': '添加条目',
'x-component': 'ArrayCards.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>Effects 联动案例
vue
<script lang="ts" setup>
import { createForm, isField, onFieldChange, onFieldReact } from '@formily/core'
import { createSchemaField, FormProvider } from '@formily/vue'
import { ArrayCards, FormItem, Input, Submit } from '@silver-formily/element-plus'
const {
SchemaField,
SchemaArrayField,
SchemaVoidField,
SchemaStringField,
SchemaObjectField,
} = createSchemaField({
components: {
FormItem,
Input,
ArrayCards,
},
})
const form = createForm({
effects: () => {
// 主动联动模式
onFieldChange('array.*.aa', ['value'], (field, form) => {
form.setFieldState(field.query('.bb'), (state) => {
if (isField(field)) {
state.visible = field.value !== '123'
}
})
})
// 被动联动模式
onFieldReact('array.*.dd', (field) => {
field.visible = field.query('.cc').get('value') !== '123'
})
},
})
async function log(values) {
console.log(values)
}
</script>
<template>
<FormProvider :form="form">
<SchemaField>
<SchemaArrayField
name="array"
:max-items="3"
x-component="ArrayCards"
x-decorator="FormItem"
:x-component-props="{
title: '对象数组',
}"
>
<SchemaObjectField>
<SchemaVoidField x-component="ArrayCards.Index" />
<SchemaStringField
name="aa"
x-decorator="FormItem"
title="AA"
required
description="AA输入123时隐藏BB"
x-component="Input"
/>
<SchemaStringField
name="bb"
x-decorator="FormItem"
title="BB"
required
x-component="Input"
/>
<SchemaStringField
name="cc"
x-decorator="FormItem"
title="CC"
required
description="CC输入123时隐藏DD"
x-component="Input"
/>
<SchemaStringField
name="dd"
x-decorator="FormItem"
title="DD"
required
x-component="Input"
/>
<SchemaVoidField x-component="ArrayCards.Remove" />
<SchemaVoidField x-component="ArrayCards.MoveUp" />
<SchemaVoidField x-component="ArrayCards.MoveDown" />
</SchemaObjectField>
<SchemaVoidField x-component="ArrayCards.Addition" title="添加条目" />
</SchemaArrayField>
</SchemaField>
<Submit @submit="log">
提交
</Submit>
</FormProvider>
</template>
<style lang="scss" scoped></style>JSON Schema 联动案例
vue
<script lang="ts" setup>
import { createForm } from '@formily/core'
import { createSchemaField, FormProvider } from '@formily/vue'
import { ArrayCards, FormItem, Input, Submit } from '@silver-formily/element-plus'
const { SchemaField } = createSchemaField({
components: {
FormItem,
Input,
ArrayCards,
},
})
const form = createForm()
const schema = {
type: 'object',
properties: {
array: {
'type': 'array',
'x-component': 'ArrayCards',
'maxItems': 3,
'title': '对象数组',
'items': {
type: 'object',
properties: {
index: {
'type': 'void',
'x-component': 'ArrayCards.Index',
},
aa: {
'type': 'string',
'x-decorator': 'FormItem',
'title': 'AA',
'required': true,
'x-component': 'Input',
'description': '输入123',
},
bb: {
'type': 'string',
'title': 'BB',
'required': true,
'x-decorator': 'FormItem',
'x-component': 'Input',
'x-reactions': [
{
dependencies: ['.aa'],
when: '{{$deps[0] != \'123\'}}',
fulfill: {
schema: {
'title': 'BB',
'x-disabled': true,
},
},
otherwise: {
schema: {
'title': 'Changed',
'x-disabled': false,
},
},
},
],
},
remove: {
'type': 'void',
'x-component': 'ArrayCards.Remove',
},
moveUp: {
'type': 'void',
'x-component': 'ArrayCards.MoveUp',
},
moveDown: {
'type': 'void',
'x-component': 'ArrayCards.MoveDown',
},
},
},
'properties': {
addition: {
'type': 'void',
'title': '添加条目',
'x-component': 'ArrayCards.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
ArrayCards
卡片组件
参考 https://cn.element-plus.org/zh-CN/component/card.html