码迷,mamicode.com
首页 > 其他好文 > 详细

Formily教程 | formily是中后台复杂场景的表单解决方案

时间:2021-07-14 18:48:08      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:json   需要   label   turn   开箱   term   入门级   名称   BMI   

前言

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文章输出

Formily教程 | formily是中后台复杂场景的表单解决方案

标签:json   需要   label   turn   开箱   term   入门级   名称   BMI   

原文地址:https://www.cnblogs.com/ifannie/p/15010271.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有
迷上了代码!