VForm Plus

基于 Element UI 的可视化表单设计器，支持自动计算功能。

特性

• 📝 可视化设计：拖拽式表单设计器
• 🔄 自动计算：支持字段之间的自动计算（如 BMI 自动计算）
• 🎨 丰富组件：内置多种表单组件
• 📱 响应式布局：支持栅格布局
• 💾 JSON 配置：表单配置可导入导出
• 🔌 易于集成：基于 Vue 2.x + Element UI

安装

npm

npm install vform-plus

yarn

yarn add vform-plus

pnpm

pnpm add vform-plus

使用

全局引入

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import VFormPlus from 'vform-plus'
import 'vform-plus/dist/style.css'

Vue.use(ElementUI)
Vue.use(VFormPlus)

按需引入

import Vue from 'vue'
import { FormDesigner, FormRender } from 'vform-plus'
import 'vform-plus/dist/style.css'

Vue.component('FormDesigner', FormDesigner)
Vue.component('FormRender', FormRender)

基础使用

表单设计器

<template>
  <div>
    <form-designer ref="designer" />
  </div>
</template>

<script>
export default {
  mounted() {
    // 获取表单 JSON
    const formJson = this.$refs.designer.getFormJson()
    console.log(formJson)
  }
}
</script>

表单渲染器

<template>
  <div>
    <form-render
      :form-json="formJson"
      :form-data="formData"
      ref="formRender"
    />
    <el-button @click="submitForm">提交</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formJson: {
        widgetList: [],
        formConfig: {}
      },
      formData: {}
    }
  },
  methods: {
    submitForm() {
      this.$refs.formRender.getFormData().then(formData => {
        console.log('表单数据:', formData)
      }).catch(error => {
        console.error('表单验证失败:', error)
      })
    }
  }
}
</script>

自动计算功能

支持根据其他字段自动计算某个字段的值。

配置示例

在表单设计器中，选择需要自动计算的字段，在"高级属性"中配置"计算表达式"：

{weight} / (({height} / 100) * ({height} / 100))

表达式语法

• 使用 {字段名} 引用其他字段的值
• 支持运算符：+、-、*、/
• 支持括号：()

完整示例

{
  "widgetList": [
    {
      "type": "input",
      "options": {
        "name": "height",
        "label": "身高(cm)",
        "defaultValue": ""
      }
    },
    {
      "type": "input",
      "options": {
        "name": "weight",
        "label": "体重(kg)",
        "defaultValue": ""
      }
    },
    {
      "type": "input",
      "options": {
        "name": "bmi",
        "label": "BMI",
        "disabled": true,
        "computedExpression": "{weight} / (({height} / 100) * ({height} / 100))"
      }
    }
  ]
}

API

FormDesigner 表单设计器

Methods

| 方法名 | 说明 | 参数 | 返回值 | |--------|------|------|--------| | getFormJson | 获取表单 JSON 配置 | - | Object | | setFormJson | 设置表单 JSON 配置 | formJson: Object | - | | clearDesigner | 清空设计器 | - | - |

FormRender 表单渲染器

Props

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | formJson | 表单 JSON 配置 | Object | {} | | formData | 表单数据 | Object | {} | | optionData | 选项数据 | Object | {} | | previewState | 是否为预览状态 | Boolean | false |

Methods

| 方法名 | 说明 | 参数 | 返回值 | |--------|------|------|--------| | getFormData | 获取表单数据（带验证） | needValidation: Boolean | Promise | | setFormData | 设置表单数据 | formData: Object | - | | getFieldValue | 获取字段值 | fieldName: String | Any | | setFieldValue | 设置字段值 | fieldName: String, value: Any | - | | resetForm | 重置表单 | - | - | | validateForm | 验证表单 | callback: Function | - | | disableForm | 禁用整个表单 | - | - | | enableForm | 启用整个表单 | - | - |

浏览器兼容性

• 现代浏览器
• IE 11+（需要 polyfill）

依赖

• Vue 2.6.0+
• Element UI 2.15.0+

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

License

MIT

更新日志

v1.0.0

• 初始版本
• 支持可视化表单设计
• 支持自动计算功能