前言
formily 不是一个简单的前端*。Formily 是一个由阿里巴巴集团多 BU 共建的面向中后台复杂场景的表单解决方案，它也是一个表单框架。它的前身是供应链平台在 2019 年初对外开源的 UForm 解决方案，UForm 的前身又是在供应链平台内部自研的某个表单框架。总体来看，Formily 是一个经过了漫长时间所磨炼，沉淀出来的表单解决方案。
它解决什么问题？
如果你们的后台有超级多的表单，那么选它没得问题。中台我觉得是一个复杂的概念，如果你们公司一直说这个事儿，那么这个formily可以是你的技术池（备胎）。它有复杂的表单联动，表单校验，满足大部分表单的需求，平时使用的都是非常简单的表单。一份JSON就可以实现复杂的表单，开箱即用。
开箱即用的栗子
说实话，这玩意唯一的缺点不是文档写的不好，而是不管用VUE人的死活。除了@formily/vue里面的栗子用了VUE，其他的所有栗子都是React。一个表单提交，我整整花了两个小时（是我菜了），下面我会重点提出来的。npm啥的我就不说了。官方文档都有注意: 这里的技术栈是 VUE + Formily + element UI
// form.vue
<template>
<ElForm class="flex flex-column" label-width="180px">
<FormProvider :form="form">
<SchemaField
:schema="schema"
/>
<FormConsumer>
<!-- 非常重要！！！！ FormConsumer必须是这个位置 才能表单消费 -->
<template #default="{ form }">
<button @click='form.submit'></button> //官方文档根本不管VUE的死活在这里！！！
</template>
</FormConsumer>
</FormProvider>
</ElForm>
</template>
<script>
import { createForm, onFormValuesChange, onFormSubmit } from '@formily/core' //必须要引入
import { FormProvider, createSchemaField, FormConsumer } from '@formily/vue' //vue
import { Input } from 'element' //初次上手建议 就直接引用element UI 组件就可以了
const { SchemaField } = createSchemaField({
Input
}) //代表你需要这个生成器给你生成什么样的表单组件
export default {
components: { FormProvider, SchemaField, FormConsumer },
data() {
return {
form: createForm({effects: this.useEffects}), //生成表单的方法，传入监听的参数
schema: null
}
},
mounted() {
this.schema = {
type: 'object',
properties: {
name: {
type: 'string',
title: '名称',
required: true,
'x-component': 'Input'
}
}
}
},
methods: {
useEffects() {
onFormValuesChange(form => { //监听数据变化了
console.log(form) //这个form 很重要 这里你才能够拿到表单的值
})
onFormSubmit(form => { //监听表单提交
console.log(form)
})
},
}
}
避雷指南
我非常理解一个坑对于做这个功能的人，有多么令人崩溃。官方文档的栗子，要么没有告诉你怎么提交的，要么就是拿着@formily/nextSubmit，@formily/next 是基于 Fusion Design 封装的针对表单场景专业级(Professional)组件库。但我们不是有了element UI 组件了吗？大可不必
总结
这是一个非常入门级的源码，而且我的业务才刚刚开始做，上百个表单等我实现，应该还有下一个避雷指南。而且对于element 二次封装也很可以。复杂的表单有复杂的UI，不是一个element 单一组件就可以漂亮实现。下一期介绍formily 的一些概念，虽然我也是临时抱佛脚，周末学习了formily,大家一起探讨。不知道掘金有没有问题答疑~我是真的没有看到有很多formily文章输出