您现在的位置是：首页 > 文章详情

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

日期：2024-05-21点击：204收藏

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中新增wrapEl和formEl方法,用于获取对应的vue组件实例
新增 formCreate新增setData和removeData方法

 type setData = (name:string,value:any) =>void; type removeData = (name:string)=>void;

新增增加loadData自定义属性

 //设置数据 formCreate.setData('address',[]);

 //生成规则 {  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

 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>

 //表单插入的节点 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()  }  })