form-create 3.0 版本發布，好用的Vue3版本動態表單生成組件

form-create 是一個可以通過 JSON 生成具有動態渲染、數據收集、驗證和提交功能的表單生成組件。支持2個UI框架，並且支持生成任何 Vue 組件。內置20種常用表單組件和自定義組件，再復雜的表單都可以輕松搞定。

文檔 | 源碼 

 

3.0.0 版本主要更新了以下內容:

• 適配 vue3

• 適配 element-plus 和 ant-design-vue3.0

• 功能於 2.5.12 版本一致

移除配置項

• attrs
• scopedSlots
• domProps
• hook
• nativeOn
• nativeEmit

功能調整

• 修改 validate, validateField, submit 返回值, 返回Promise
• 修改 v-model 為 v-model:api
• 修改 value.sync 為 v-model

不兼容項

• 不支持 iview
• 移除 template 模板方式生成組件
• 移除 formCreate.init 方法

支持UI

• element-plus
• ant-design-vue

功能

• 支持 Vue3 版本

• 支持2個 UI 框架

• 通過 JSON 生成表單

• 自定義組件

  • 可生成任何Vue組件
  • 自帶數據驗證
  • 可快速擴展
  • 輕松轉換為表單組件

• 全局配置

  • 可以設置表單配置
  • 可以設置指定組件全局配置
  • 可以設置所有組件公共的全局配置

• 自定義配置項擴展，快速根據業務邏輯擴展

• 支持組件設置前后綴

• 支持規則之前聯動更新

• 強大的API，可快速操作表單

• 雙向數據綁定

• 事件擴展，事件注入

• 局部視圖更新

• 數據驗證

• 柵格布局

• 嵌套對象，數組組件

• 內置組件

  • hidden
  • input
  • inputNumber
  • checkbox
  • radio
  • switch
  • select
  • autoComplete
  • cascader
  • colorPicker
  • datePicker
  • timePicker
  • rate
  • slider
  • upload
  • tree
  • frame
  • group
  • subForm/object

圖例

安裝

根據自己使用的 UI 安裝對應的版本

element-plus 版本

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

ant-design-vue@3.0 版本

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

快速上手

本文以element-ui為例

1. 在 main.js 中寫入以下內容：

import ElementUI from 'element-plus/es/index'
import 'element-plus/dist/index.css'
import formCreate from '@form-create/element-ui'

app.use(ElementUI)
app.use(FormCreate)

 

1. 生成表單

在線示例

<template>
  <div id="app1">
      <form-create v-model:api="fApi" :rule="rule" :option="option" v-model="value"></form-create>
  </div>
</template>
export default {
    data() {
        return {
            //實例對象
            fApi: {},
            //表單數據
            value: {},
            //表單生成規則
            rule: [
                {
                    type: 'input',
                    field: 'goods_name',
                    title: '商品名稱'
                },
                {
                    type: 'datePicker',
                    field: 'created_at',
                    title: '創建時間'
                }
            ],
            //組件參數配置
            option: {
                //表單提交事件
                onSubmit: function (formData) {
                    alert(JSON.stringify(formData))
                }
            }
        }
    }
}