form-create 3.1.31 发布,优化渲染逻辑, 提升表单性能

来源: 投稿
作者: xaboy
2024-05-21 17:05:00

FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持5个UI框架,并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定目前在OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。

帮助文档 | 源码下载 

3.1.31 版本及近期主要更新了以下内容

  • 高级版FormCreate表单设计器强势登场,让表单设计更简单
  • 优化渲染逻辑, 提升表单性能
  • 新增 api 增加 getRenderRule 方法, 获取组件的最终渲染规则
  • 新增 api 增加 getRefRule 方法, 可以通过 name 字段获取规则
  • 新增 api 增加 bus 属性, 可以监听和触发自定义事件
  • 新增 api 增加 fetch 方法, 可以手动加载远程数据
  • 新增 upload 回调参数中增加 linkField 字段,可以判断是由那个关联字段触发
  • 新增 validate 自动注入 inject 字段,可以在自定义验证函数中拿到规则和api
  • 新增 组件的options配置中增加 onChange 回调,修改表单时触发
  • 优化 reuqired 属性
  • 优化 修改组件的 disabled 配置实现逻辑
  • 新增 api增加Top字段, 获取最顶级表单的api
  • 新增 组件增加disabled配置,全局禁用表单组件
  • 优化组件隐藏逻辑
  • 优化element-plus兼容性
  • 优化 子表单基础表单配置
  • 优化 计算属性
  • 修复 options.beforeFetch 配置不生效问题
  • 组件增加title插槽,支持自定义表单的标签区域
  • 修复 options.title 配置不生效问题
  • 修复 options.beforeFetch 配置不生效问题
  • 修复 ElementPlus兼容老版本
  • 修复 Ts描述

Features🌟

  • 重构 group组件, 重写样式,并增加序号和上下移动功能,增加sortBtn和parse参数
  • 新增 api中新增wrapElformEl方法,用于获取对应的vue组件实例
  • 新增 formCreate新增setDataremoveData方法
ts
type setData = (name:string,value:any) =>void;
type removeData = (name:string)=>void;
  • 新增 增加loadData自定义属性
js
//设置数据
formCreate.setData('address',[]);
js
//生成规则
{
    type:'select',
    options: [],
    effect: {
        loadData:{
            attr:'address',
            to:'options'
        }
    }
}
  • 优化 fetch.parse 配置,支持配置字符串,指定路径,例如props.options

安装

根据自己使用的 UI 安装对应的版本

element-ui

npm install @form-create/element-ui@next
 

ant-design-vue

npm install @form-create/ant-design-vue@next
 

arco-design

npm install @form-create/arco-design@next
 

naive-ui

npm install @form-create/naive-ui@next
 

tdesign

npm install @form-create/tdesign@next
 

引入

CDN:

element-plus

<link href="https://unpkg.com/element-plus@2.0.1/dist/index.css"></link>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/element-plus@2.0.1/dist/index.full.js"></script>
<script src="https://unpkg.com/@form-create/element-ui@next/dist/form-create.min.js"></script>
 

ant-design-vue

<link href="https://unpkg.com/ant-design-vue@3.0.0-alpha.11/dist/antd.min.css"></link>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/dayjs"></script>
<script src="https://unpkg.com/ant-design-vue@3.0.0-alpha.11/dist/antd.min.js"></script>
<script src="https://unpkg.com/@form-create/ant-design-vue@next/dist/form-create.min.js"></script>
 

NodeJs:

element-plus ^2.0

import formCreate from '@form-create/element-ui'
app.use(formCreate)
 

element-plus (with unplugin-vue-components/vite & ElementPlusResolver)

import formCreate from '@form-create/element-ui'
import install from '@form-create/element-ui/auto-import'
formCreate.use(install)
app.use(formCreate)
 

ant-design-vue ^3.0

import formCreate from '@form-create/ant-design-vue'
app.use(formCreate)
 

arco-design ^2.0

import formCreate from '@form-create/arco-design'
app.use(formCreate)
 

naive-ui ^2.0

import formCreate from '@form-create/naive-ui'
app.use(formCreate)
 

tdesign ^0.17.3

import formCreate from '@form-create/tdesign'
app.use(formCreate)
 

使用

可通过以下2种方式创建表单:

组件模式, 全局方法

组件模式

使用 <form-create></form-create> 标签创建表单

html
<div id="app">
    <form-create v-model="formData" v-model:api="fApi" :rule="rule" :option="option"></form-create>
</div>

NodeJs

js
export default {
    data() {
        return {
            //实例对象
            fApi: {},
            //表单数据
            formData: {},
            //表单生成规则
            rule: [
                {
                    type: 'input',
                    field: 'goods_name',
                    title: '商品名称'
                },
                {
                    type: 'datePicker',
                    field: 'created_at',
                    title: '创建时间'
                }
            ],
            //组件参数配置
            option: {
                //表单提交事件
                onSubmit: function (formData) {
                    alert(JSON.stringify(formData))
                }
            }
        }
    }
}

在 setup 中使用

vue
<template>
  <FormCreate :rule="rule" :option="options" v-model="formData" v-model:api="fApi"></FormCreate>
</template>
<script setup>
//导入 form-create
import formCreate from "@form-create/element-ui";
import {ref} from "vue";
//获取 formCreate 组件
const FormCreate = formCreate.$form();
const fApi = ref({});
const formData = ref({});
const options = ref({
  //表单提交事件
  onSubmit: function (formData) {
    alert(JSON.stringify(formData))
  }
});
const rule = ref([
  {
    type:'input',
    field:'goods_name',
    title:'商品名称',
    value:'form-create'
  },
  {
    type:'checkbox',
    field:'label',
    title:'标签',
    value:[0,1,2,3],
    options: [
      {label:'好用',value:0},
      {label:'快速',value:1},
      {label:'高效',value:2},
      {label:'全能',value:3},
    ]
  },
]);
</script>

全局方法

使用 window 全局方法formCreate.create(rule,option)创建表单

html
<div id="app3">
    <div id="form-create"></div>
</div>
js
//表单插入的节点
const root = document.getElementById('form-create')


const fApi = window.formCreate.create(
    //表单生成规则
    [
        {
            type: 'input',
            field: 'goods_name',
            title: '商品名称'
        },
        {
            type: 'datePicker',
            field: 'created_at',
            title: '创建时间'
        }
    ],
    //组件参数配置
    {
        el: root,
        //显示表单重置按钮
        resetBtn: true,
        //表单提交事件
        onSubmit: function (formData) {
            //按钮进入提交状态
            fApi.btn.loading()
        }
    })

1. FormCreate官网:https://www.form-create.com
2. 帮助文档:https://pro.form-create.com/doc
3. 体验地址:https://pro.form-create.com/view

展开阅读全文
点击加入讨论🔥(2) 发布并加入讨论🔥
本篇精彩评论
两年前有个项目中有动态表单的需求,网上找来找去选了这一款,使用感觉还不错,配置也比较灵活,已经在两个项目中使用了(没用官方配套的设计工具,自己另外单独用java写了个定制的表单配置功能,主要是字段的定义与后台业务逻辑相关,字段名和数据类型都不能随意定义),微信技术群里也比较活跃,项目负责人在线,提过两个element-plus升级引起的组件兼容性小问题,很快就解决了,给个好评!👍👍👍 写这么多感觉自己像个托😂 实属白嫖不好意思,特来感谢和支持一下,有需要的可以小试一下。
2024-05-22 00:43
2
举报
呃,一直在用老版本(IVIEW),必须好评。
2024-05-22 09:39
1
举报
2 评论
10 收藏
分享
返回顶部
顶部