Vue 动态表单 FormCreate 3.2 发布!

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

帮助文档 | 源码下载 

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

• 新增：Element Plus 树组件支持 disabled。禁用后不能改选中值，复选框显示禁止光标。

• 新增：相对时间条件，用 dayjs 判断日期偏移和固定区间。

• 新增：Vant 下拉选择支持 clearable，可清空已选值。

• 新增：option.trim。写入字符串值时去掉两端空白。

• 新增：api.required 方法，用于切换字段的自定义必填属性。

• 新增：显示表单序号。使用文档

• 新增：支持配置 info 的默认组件和内容渲染方式。

• 优化：group 改为拖动排序，用序号或标题前的手柄替换上下箭头

• 修复：iframe 每次加载后重新挂载 form_create_helper

安装

根据自己使用的 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

使用

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

组件模式, 全局方法

组件模式​

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

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

NodeJs​

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 中使用​

<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>

1. FormCreate 官网：https://www.form-create.com
2. 帮助文档：https://www.form-create.com/v3/
3. 体验地址：https://pro.form-create.com/view
4. 移动端表单设计器：https://pro.form-create.com/mobile