VoidField

Description

Vue binding for createVoidField from @formily/core. Void fields are layout-only nodes that let you control visibility, interaction modes, and decorators for their descendants while not carrying values themselves. Props follow IVoidFieldFactoryProps.

Usage

The example shows how a VoidField toggles its children. When the VoidField is hidden (visible = false), child values are cleared because the field effectively leaves the tree. Once it becomes visible again, Formily restores the previous state thanks to its snapshot mechanism.

{}

<script setup lang="ts">
import { createForm } from '@formily/core'
import { Field, FormConsumer, FormProvider, VoidField } from '@silver-formily/vue'
import { ElButton, ElInput, ElSpace } from 'element-plus'

const form = createForm()
</script>

<template>
  <FormProvider :form="form">
    <ElSpace>
      <VoidField name="layout">
        <Field name="input" :component="[ElInput]" />
      </VoidField>
      <FormConsumer>
        <template #default="{ form: _form }">
          <ElSpace>
            <ElButton
              @click="
                () => {
                  _form
                    .query('layout')
                    .take()
                    .setState((state) => {
                      state.visible = !state.visible
                    })
                }
              "
            >
              {{ form.query('layout').get('visible') ? 'Hide' : 'Show' }}
            </ElButton>
            <div>{{ JSON.stringify(form.values, null, 2) }}</div>
          </ElSpace>
        </template>
      </FormConsumer>
    </ElSpace>
  </FormProvider>
</template>

查看源码

Props

TIP

Ported from the official definition. Because VoidField never holds a value, it will not track the value changes of its descendants, so reactions defined here should never fire.

Prop	Description	Type	Default
name	Unique path of the layout node inside the form	FormPathPattern	—
basePath	Base path used when resolving `name`, useful in arrays/nested structures	FormPathPattern	Current context path
title	Layout label, usually wired to the decorator’s `label`	`string` \| `VNode`	—
description	Extra helper text	`string` \| `VNode`	—
display	Display state: `visible`, `hidden`, or `none`	`enum`	`visible`
pattern	Interaction mode: `editable`, `disabled`, `readOnly`, or `readPretty`	`enum`	`editable`
hidden	Whether to hide the node (`display: none`)	`boolean`	`false`
visible	Whether the node renders in the DOM	`boolean`	`true`
editable	Controls editability of descendants	`boolean`	`true`
disabled	Disables interaction	`boolean`	`false`
readOnly	Enables read-only mode	`boolean`	`false`
readPretty	Use a ReadPretty presenter	`boolean`	`false`
decorator	Decorator component tuple `[Component, props]`, or `false`	`[Component, Props?]` \| `false`	`false`
decoratorContent	Slot payload forwarded to the decorator	`any`	—
component	Layout renderer tuple `[Component, props]`, or `false`	`[Component, Props?]` \| `false`	`false`
reactions	Side-effect handlers (single function or array)	FieldReaction \| FieldReaction[]	—

FormPathPattern

type FormPathPattern = string | number | Array<string | number> | RegExp

FieldReaction

type FieldReaction = (field: GeneralField) => void

VoidField ​

Description ​

Usage ​

Props ​