ArrayCollapse
折叠面板,对于每行字段数量较多,联动较多的场景比较适合使用 ArrayCollapse
注意
该组件只适用于 Schema 场景。
Markup Schema 案例
vue
<script lang="ts" setup>
import { createForm } from '@formily/core'
import { createSchemaField, FormProvider } from '@formily/vue'
import {
ArrayCollapse,
FormButtonGroup,
FormItem,
Input,
Submit,
} from '@silver-formily/element-plus'
import { ElButton } from 'element-plus'
const {
SchemaField,
SchemaArrayField,
SchemaObjectField,
SchemaVoidField,
SchemaStringField,
} = createSchemaField({
components: {
FormItem,
Input,
ArrayCollapse,
},
})
const form = createForm()
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="ArrayCollapse"
:x-component-props="{
accordion: true,
defaultOpenPanelCount: 3,
}"
>
<SchemaVoidField
x-component="ArrayCollapse.Item"
:x-component-props="{
title: '字符串数组',
}"
>
<SchemaVoidField x-component="ArrayCollapse.Index" />
<SchemaStringField
name="input"
x-decorator="FormItem"
title="Input"
required
x-component="Input"
/>
<SchemaVoidField x-component="ArrayCollapse.Remove" />
<SchemaVoidField x-component="ArrayCollapse.MoveUp" />
<SchemaVoidField x-component="ArrayCollapse.MoveDown" />
</SchemaVoidField>
<SchemaVoidField
x-component="ArrayCollapse.Addition"
title="添加条目"
/>
</SchemaArrayField>
<SchemaArrayField
name="array"
:max-items="3"
x-decorator="FormItem"
x-component="ArrayCollapse"
>
<SchemaObjectField
x-component="ArrayCollapse.Item"
:x-component-props="{
title: '对象数组',
}"
>
<SchemaVoidField x-component="ArrayCollapse.Index" />
<SchemaStringField
name="input"
x-decorator="FormItem"
title="Input"
required
x-component="Input"
/>
<SchemaVoidField x-component="ArrayCollapse.Remove" />
<SchemaVoidField x-component="ArrayCollapse.MoveUp" />
<SchemaVoidField x-component="ArrayCollapse.MoveDown" />
</SchemaObjectField>
<SchemaVoidField
x-component="ArrayCollapse.Addition"
title="添加条目"
/>
</SchemaArrayField>
<SchemaArrayField
name="string_array_unshift"
:max-items="3"
x-decorator="FormItem"
x-component="ArrayCollapse"
:x-component-props="{
defaultOpenPanelCount: 8,
}"
>
<SchemaVoidField
x-component="ArrayCollapse.Item"
:x-component-props="{
title: '字符串数组',
}"
>
<SchemaVoidField x-component="ArrayCollapse.Index" />
<SchemaStringField
name="input"
x-decorator="FormItem"
title="Input"
required
x-component="Input"
/>
<SchemaVoidField x-component="ArrayCollapse.Remove" />
<SchemaVoidField x-component="ArrayCollapse.MoveUp" />
<SchemaVoidField x-component="ArrayCollapse.MoveDown" />
</SchemaVoidField>
<SchemaVoidField
x-component="ArrayCollapse.Addition"
title="添加条目(unshift)"
:x-component-props="{
method: 'unshift',
}"
/>
</SchemaArrayField>
</SchemaField>
<FormButtonGroup>
<ElButton
@click="
() => {
form.setInitialValues({
array: Array.from({ length: 10 }).map(() => ({
input: 'default value',
})),
string_array: Array.from({ length: 10 }).map(
() => 'default value',
),
string_array_unshift: Array.from({ length: 10 }).map(
() => 'default value',
),
})
}
"
>
加载默认数据
</ElButton>
<Submit @submit="log">
提交
</Submit>
</FormButtonGroup>
</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 { ArrayCollapse, FormItem, Input, Submit } from '@silver-formily/element-plus'
const { SchemaField } = createSchemaField({
components: {
FormItem,
Input,
ArrayCollapse,
},
})
const form = createForm()
const schema = {
type: 'object',
properties: {
string_array: {
'type': 'array',
'x-component': 'ArrayCollapse',
'maxItems': 3,
'x-decorator': 'FormItem',
'items': {
'type': 'object',
'x-component': 'ArrayCollapse.Item',
'x-component-props': {
title: '字符串数组',
},
'properties': {
index: {
'type': 'void',
'x-component': 'ArrayCollapse.Index',
},
input: {
'type': 'string',
'x-decorator': 'FormItem',
'title': 'Input',
'required': true,
'x-component': 'Input',
},
remove: {
'type': 'void',
'x-component': 'ArrayCollapse.Remove',
},
moveUp: {
'type': 'void',
'x-component': 'ArrayCollapse.MoveUp',
},
moveDown: {
'type': 'void',
'x-component': 'ArrayCollapse.MoveDown',
},
},
},
'properties': {
addition: {
'type': 'void',
'title': '添加条目',
'x-component': 'ArrayCollapse.Addition',
},
},
},
array: {
'type': 'array',
'x-component': 'ArrayCollapse',
'maxItems': 3,
'x-decorator': 'FormItem',
'items': {
'type': 'object',
'x-component': 'ArrayCollapse.Item',
'x-component-props': {
title: '对象数组',
},
'properties': {
index: {
'type': 'void',
'x-component': 'ArrayCollapse.Index',
},
input: {
'type': 'string',
'x-decorator': 'FormItem',
'title': 'Input',
'required': true,
'x-component': 'Input',
},
remove: {
'type': 'void',
'x-component': 'ArrayCollapse.Remove',
},
moveUp: {
'type': 'void',
'x-component': 'ArrayCollapse.MoveUp',
},
moveDown: {
'type': 'void',
'x-component': 'ArrayCollapse.MoveDown',
},
},
},
'properties': {
addition: {
'type': 'void',
'title': '添加条目',
'x-component': 'ArrayCollapse.Addition',
},
},
},
array_unshift: {
'type': 'array',
'x-component': 'ArrayCollapse',
'maxItems': 3,
'x-decorator': 'FormItem',
'items': {
'type': 'object',
'x-component': 'ArrayCollapse.Item',
'x-component-props': {
title: '对象数组',
},
'properties': {
index: {
'type': 'void',
'x-component': 'ArrayCollapse.Index',
},
input: {
'type': 'string',
'x-decorator': 'FormItem',
'title': 'Input',
'required': true,
'x-component': 'Input',
},
remove: {
'type': 'void',
'x-component': 'ArrayCollapse.Remove',
},
moveUp: {
'type': 'void',
'x-component': 'ArrayCollapse.MoveUp',
},
moveDown: {
'type': 'void',
'x-component': 'ArrayCollapse.MoveDown',
},
},
},
'properties': {
addition: {
'type': 'void',
'title': '添加条目(unshift)',
'x-component': 'ArrayCollapse.Addition',
'x-component-props': {
method: 'unshift',
},
},
},
},
},
}
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, onFieldChange, onFieldReact } from '@formily/core'
import { createSchemaField, FormProvider } from '@formily/vue'
import { ArrayCollapse, FormItem, Input, Submit } from '@silver-formily/element-plus'
const {
SchemaField,
SchemaArrayField,
SchemaObjectField,
SchemaVoidField,
SchemaStringField,
} = createSchemaField({
components: {
FormItem,
Input,
ArrayCollapse,
},
})
const form = createForm({
effects: () => {
// 主动联动模式
onFieldChange('array.*.aa', ['value'], (field, form) => {
form.setFieldState(field.query('.bb'), (state) => {
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="ArrayCollapse"
x-decorator="FormItem"
:x-component-props="{
title: '对象数组',
}"
>
<SchemaObjectField
x-component="ArrayCollapse.Item"
x-decorator="FormItem"
:x-component-props="{
title: '对象数组',
}"
>
<SchemaVoidField x-component="ArrayCollapse.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="ArrayCollapse.Remove" />
<SchemaVoidField x-component="ArrayCollapse.MoveUp" />
<SchemaVoidField x-component="ArrayCollapse.MoveDown" />
</SchemaObjectField>
<SchemaVoidField
x-component="ArrayCollapse.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 { ArrayCollapse, FormItem, Input, Submit } from '@silver-formily/element-plus'
const { SchemaField } = createSchemaField({
components: {
FormItem,
Input,
ArrayCollapse,
},
})
const form = createForm()
const schema = {
type: 'object',
properties: {
array: {
'type': 'array',
'x-component': 'ArrayCollapse',
'maxItems': 3,
'title': '对象数组',
'items': {
'type': 'object',
'x-component': 'ArrayCollapse.Item',
'x-component-props': {
header: '对象数组',
},
'properties': {
index: {
'type': 'void',
'x-component': 'ArrayCollapse.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': 'ArrayCollapse.Remove',
},
moveUp: {
'type': 'void',
'x-component': 'ArrayCollapse.MoveUp',
},
moveDown: {
'type': 'void',
'x-component': 'ArrayCollapse.MoveDown',
},
},
},
'properties': {
addition: {
'type': 'void',
'title': '添加条目',
'x-component': 'ArrayCollapse.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
ArrayCollapse
参考 https://cn.element-plus.org/zh-CN/component/collapse.html
ArrayCollapse.Item
参考 https://cn.element-plus.org/zh-CN/component/collapse.html