Form

2023-09-30 00:57| 来源: 网络整理| 查看: 265

Form-Generator拖拽表单

本文讲述了form-generator项目基于Vue框架以及ElementUI组件实现拖拽表单完成项目及二次开发 gitee地址： https://gitee.com/mrhj/form-generator?_from=gitee_search

简介

Element UI表单设计及代码生成器，可将生成的代码直接运行在基于Element的vue项目中；也可导出JSON表单，使用配套的解析器将JSON解析成真实的表单。

使用在左侧点击组件或拖拽组件到画板，生成对应组件根据业务所需在右侧属性面板设置组件及表单属性点击查看json可以查看当前画布组件及表单的json生成，用于存储于后端点击运行可以以画布组件及右侧属性配置生成对应页面内容及vue模板代码，可修改代码点击运行生成最新页面（json不会更改），也可直接生成vue文件放入项目中运行项目原理采用vuedraggable第三方资源包在Vue项目中实现组件的拖拽在src/components/generator/config.js中配置表单以及组件的json配置(下方有代码)拖拽至画板中将每一个组件的json配置统一push进统一渲染数组，通过vue的render函数进行画板中的组件渲染

前提：项目中以全局注册element UI组件，这样才可以直接生成el-input等标签组件

点击运行时生成页面，项目使用iframe嵌入同项目中的priview页面（在vue.config.js中配置有两个页面入口） priview页面在src/views/priview/main.js重新new Vue ，通过src/components/generator/js.js 以及html.js生成对应的template模板以及script脚本（html以及js的生成请查看详细代码）通过new Vue时的components以及template属性将生成的字符串模板生成对应vue文件页面

下方为组件以及表单的json配置

config.js的配置 // 表单属性【右面板】 export const formConf = { formRef: 'elForm', formModel: 'formData', size: 'medium', labelPosition: 'right', labelWidth: 100, formRules: 'rules', gutter: 15, disabled: false, span: 24, formBtns: true } // 输入型组件【左面板】 export const inputComponents = [ { // 组件的自定义配置 __config__: { label: '单行文本', labelWidth: null, showLabel: true, changeTag: true, tag: 'el-input', tagIcon: 'input', defaultValue: undefined, required: true, layout: 'colFormItem', span: 24, document: 'https://element.eleme.cn/#/zh-CN/component/input', // 正则校验规则 regList: [] }, // 组件的插槽属性 __slot__: { prepend: '', append: '' }, // 其余的为可直接写在组件标签上的属性 placeholder: '请输入', style: { width: '100%' }, clearable: true, 'prefix-icon': '', 'suffix-icon': '', maxlength: null, 'show-word-limit': false, readonly: false, disabled: false }] 项目二次开发修改原有的Element组件添加属性：在config.js中添加所需属性（需为element当前组件支持属性）

如果需要新增属性可配置，需在src/views/index/RightPanel.vue中设置对应的配置表单组件

删除属性：根据RightPanel.vue中的属性展示条件来判断对应组件json中的属性来做删除和修改添加新组件添加Element其他组件，在config中添加新的组件json配置，属性根据新增Element组件的属性来配置并在RightPanel中设置其显示属性添加自定义组件（非Element）在config中添加组件json ， tag设置为组件注册名在两个页面的入口main.js中全局注册需要添加的自定义组件添加实体对应

可与后端配合添加实体与表单相对应，然后修改组件字段名为下拉框选择实体并与之对应

如果支持多层级一对一或者一对多的实体时需要在生成对应的js时修改data生成，原项目为扁平化data字符串生成，笔者建议使用Object对象生成形式逐层级生成对象，最后JSON.stringfly()转化为字符串抛出

添加组件示例（以详情展示组件为例） config.js中添加json配置 { // 组件的自定义配置 modelArr: [], codeModelArr: [], __config__: { label: '详情展示', labelWidth: null, showLabel: true, tag: 'look-detail', tagIcon: 'detail', // defaultValue: undefined, required: true, layout: 'colFormItem', span: 24, // 正则校验规则 regList: [], }, process: false, processKey: '', // 其余的为可直接写在组件标签上的属性 }

拖动至画布中的样式展示为tag全局组件look-detail ， process以及processKey则相当于组件的props传递下去，切记 --记得全局注册组件

下图为左侧组件列表，拖拽至画布生成组件效果

在这里插入图片描述

下图为详情显示及标签显示组件拖拽后展示效果，参数文本可根据字段修改

在这里插入图片描述

【本文地址】

Form

Form

今日新闻

推荐新闻