Editable

局部编辑器，对于一些空间要求较高的表单区域可以使用该组件
Editable 组件相当于是 FormItem 组件的变体，所以通常放在 decorator 中

注意

由于 readPretty 状态下无法触发 formily 的校验，本组件库中所有组件的阅读态映射没有使用官方的mapReadPretty，而是使用了内部改造过的mapReadPretty函数，该函数会额外读取Field模型中data对象上的readPretty属性，如果为true则同样会呈现阅读态，这种模拟的阅读态不会阻止formily的校验，如果自行封装的组件想使用Editable组件请使用@silver-formily/element-plus/__builtins__中引入mapReadPretty。不然会出现阅读态无法呈现的问题。

提示

@formily/core从v2.3.3开始支持配置触发校验的状态。如果使用2.3.3以上版本可以通过该属性来使用内置的mapReadPretty，同样可以触发校验。

提示

Editable 组件现在切换状态时不会修改Field的pattern属性，而是修改Field字段模型中data对象上的readPretty属性，原因见上。

Markup Schema 案例

vue

<script lang="ts" setup>
import { createForm } from '@formily/core'
import { createSchemaField, FormProvider } from '@formily/vue'
import {
  DatePicker,
  Editable,
  FormButtonGroup,
  FormItem,
  Input,
  Submit,
} from '@silver-formily/element-plus'

const { SchemaField, SchemaStringField, SchemaVoidField, SchemaObjectField }
  = createSchemaField({
    components: {
      FormItem,
      Input,
      DatePicker,
      Editable,
    },
  })

const form = createForm()

async function log(values) {
  console.log(values)
}
</script>

<template>
  <FormProvider :form="form">
    <SchemaField>
      <SchemaStringField
        name="date"
        title="日期"
        x-decorator="Editable"
        x-component="DatePicker"
      />
      <SchemaStringField
        name="input"
        title="输入框"
        x-decorator="Editable"
        x-component="Input"
      />
      <SchemaVoidField
        name="void"
        title="虚拟节点容器"
        x-component="Editable.Popover"
        :x-reactions="
          (field) => {
            field.title = field.query('.void.date2').get('value') || field.title
          }
        "
      >
        <SchemaStringField
          name="date2"
          title="日期"
          x-decorator="FormItem"
          x-component="DatePicker"
        />
        <SchemaStringField
          name="input2"
          title="输入框"
          x-decorator="FormItem"
          x-component="Input"
        />
      </SchemaVoidField>
      <SchemaObjectField
        name="object"
        title="对象节点容器"
        x-component="Editable.Popover"
        :x-reactions="
          (field) => {
            field.title = (field.value && field.value.date) || field.title
          }
        "
      >
        <SchemaStringField
          name="date"
          title="日期"
          x-decorator="FormItem"
          x-component="DatePicker"
        />
        <SchemaStringField
          name="input"
          title="输入框"
          x-decorator="FormItem"
          x-component="Input"
        />
      </SchemaObjectField>
    </SchemaField>
    <FormButtonGroup>
      <Submit @submit="log">
        提交
      </Submit>
    </FormButtonGroup>
  </FormProvider>
</template>

<style lang="scss" scoped></style>

JSON Schema 案例

使用editProps属性控制编辑状态下的尺寸

vue

<script lang="ts" setup>
import { createForm } from '@formily/core'
import { createSchemaField, FormProvider } from '@formily/vue'
import {
  DatePicker,
  Editable,
  FormButtonGroup,
  FormItem,
  Input,
  Submit,
} from '@silver-formily/element-plus'

const { SchemaField } = createSchemaField({
  components: {
    FormItem,
    Input,
    DatePicker,
    Editable,
  },
})

const schema = {
  type: 'object',
  properties: {
    date: {
      'type': 'string',
      'title': '日期',
      'x-decorator': 'Editable',
      'x-decorator-props': {
        editProps: {
          size: 'small',
          class: 'editable-date-picker__width',
        },
      },
      'x-component': 'DatePicker',
      'x-component-props': {
        type: 'daterange',
      },
    },
    input: {
      'type': 'string',
      'title': '输入框',
      'x-decorator': 'Editable',
      'x-decorator-props': {
        editProps: {
          size: 'small',
          style: {
            width: '80px',
          },
        },
      },
      'x-component': 'Input',
    },
    void: {
      'type': 'void',
      'title': '虚拟节点容器',
      'x-component': 'Editable.Popover',
      'x-reactions':
        '{{(field) => field.title = field.query(\'.void.date2\').get(\'value\') || field.title}}',
      'properties': {
        date2: {
          'type': 'string',
          'title': '日期',
          'x-decorator': 'FormItem',
          'x-component': 'DatePicker',
        },
        input2: {
          'type': 'string',
          'title': '输入框',
          'x-decorator': 'FormItem',
          'x-component': 'Input',
        },
      },
    },
    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',
        },
      },
    },
  },
}

const form = createForm()

async function log(values) {
  console.log(values)
}
</script>

<template>
  <FormProvider :form="form">
    <SchemaField :schema="schema" />
    <FormButtonGroup>
      <Submit @submit="log">
        提交
      </Submit>
    </FormButtonGroup>
  </FormProvider>
</template>

<style lang="scss">
.editable-date-picker__width .el-tooltip__trigger {
  --el-date-editor-daterange-width: 200px;
}
</style>

Template 案例

vue

<script lang="ts" setup>
import { createForm } from '@formily/core'
import { Field, FormProvider, ObjectField, VoidField } from '@formily/vue'
import {
  DatePicker,
  Editable,
  FormButtonGroup,
  FormItem,
  Input,
  Submit,
} from '@silver-formily/element-plus'

const form = createForm()

async function log(values) {
  console.log(values)
}
</script>

<template>
  <FormProvider :form="form">
    <Field
      name="date"
      title="日期"
      :decorator="[Editable]"
      :component="[DatePicker]"
    />
    <Field
      name="input"
      title="输入框"
      :decorator="[Editable]"
      :component="[Input]"
    />
    <VoidField
      name="void"
      title="虚拟节点容器"
      :component="[Editable.Popover]"
      :reactions="
        (field) => {
          field.title = field.query('.void.date2').get('value') || field.title
        }
      "
    >
      <Field
        name="date2"
        title="日期"
        :decorator="[FormItem]"
        :component="[DatePicker]"
      />
      <Field
        name="input2"
        title="输入框"
        :decorator="[FormItem]"
        :component="[Input]"
      />
    </VoidField>
    <ObjectField
      name="iobject"
      title="对象节点容器"
      :component="[Editable.Popover]"
      :reactions="
        (field) => {
          field.title = (field.value && field.value.date) || field.title
        }
      "
    >
      <Field
        name="date"
        title="日期"
        :decorator="[FormItem]"
        :component="[DatePicker]"
      />
      <Field
        name="input"
        title="输入框"
        :decorator="[FormItem]"
        :component="[Input]"
      />
    </ObjectField>
    <Field
      name="disabled"
      title="禁用"
      :decorator="[Editable]"
      :component="[Input]"
      initial-value="已经禁用的Editable"
      :disabled="true"
    />
    <FormButtonGroup>
      <Submit @submit="log">
        提交
      </Submit>
    </FormButtonGroup>
  </FormProvider>
</template>

<style lang="scss" scoped></style>

Template 校验案例

API

Editable

内联编辑

参考 /component/form-item.html#api

参数	说明	类型	默认值
editProps	编辑状态下的额外属性值	`object`	`null`

浮层编辑

参考 /component/form-item.html#api

参考 https://cn.element-plus.org/zh-CN/component/popover.html

Editable.Popover同时支持FormItem及ElPopover的所有属性，两者应该没有冲突的属性值。如果存在则目前是以FormItem的属性优先。目前暂不支持两者组件的插槽。

Editable ​

Markup Schema 案例 ​

JSON Schema 案例 ​

Template 案例 ​

Template 校验案例 ​

API ​

Editable ​

Editable.Popover ​

Editable

Markup Schema 案例

JSON Schema 案例

Template 案例

Template 校验案例

API

Editable

Editable.Popover