快速开始
介绍
@silver-formily/element-plus 是基于 @formily/element-plus 重新封装的组件库，提供了一套开箱即用的表单解决方案。在原来的基础上，我们还做了一大量的重构及优化，使得组件更加易用、灵活。
注意
从 2.x 版本起，组件库的vue绑定库从 @formily/vue 迁移至 @silver-formily/vue。除了需要注意使用时 Field、SchemaField等组件也需要从 @silver-formily/vue 中引入之外。使用自定义封装组件时也需要注意，默认的绑定行为已经改变，请不要再使用 value / onChange 的方式绑定自定义组件。详情请参考官方文档
注意
从 5.x 版本起，@silver-formily/element-plus使用的所有对等依赖全部迁移到了 Silver Formily独立维护，所需的依赖完全独立于 Formily。
安装
出于灵活组合的考虑，@silver-formily/element-plus 的所有依赖都采用了 peerDependencies，不再有项目中的 element-plus 与 @formily/element-plus 使用的 element-plus 的版本不一致导致的渲染效果不一致的问题。
其中 element-plus 目前要求 >= 2.11.0。这是因为组件库根入口会聚合导出所有组件，而部分封装组件依赖了较新的 Element Plus 组件能力；如果宿主项目安装的 element-plus 版本过低，导入根入口时就可能直接报错。
从npm 7版本开始，默认会自动安装 peerDependencies，无需手动安装。如果使用的是pnpm可能需要通过配置开启自动安装peerDependencies的配置项，不然会报错。
pnpm config set auto-install-peers true
pnpm install @silver-formily/element-plusnpm install --save @silver-formily/element-plus注意
@silver-formily/element-plus 目前仅提供了esm格式的导出，没有提供cjs和umd格式的导出。
响应式数据
<script lang="ts" setup>
import { createForm } from '@silver-formily/core'
import { FormItem, InputNumber, Space } from '@silver-formily/element-plus'
import { Field, FormConsumer, FormProvider } from '@silver-formily/vue'
const form = createForm()
</script>
<template>
<FormProvider :form="form">
<Space>
<Field
name="price"
title="价格"
:initial-value="5.2"
:decorator="[FormItem]"
:component="[
InputNumber,
{
placeholder: '请输入',
style: {
width: 100,
},
},
]"
/>
<FormItem>×</FormItem>
<Field
name="count"
title="数量"
:initial-value="100"
:decorator="[FormItem]"
:component="[
InputNumber,
{
placeholder: '请输入',
style: {
width: 100,
},
},
]"
/>
<FormConsumer>
<template #default="{ form: consumerForm }">
<FormItem>
= {{ `${consumerForm.values.price * consumerForm.values.count} 元` }}
</FormItem>
</template>
</FormConsumer>
</Space>
</FormProvider>
</template>