ng-form是致力打造开源最强vue动态表单组件,目前已经适配了element-ui版本和iview版本,后续会支持element-plus,ant design。
码云代码地址:
element-ui: https://gitee.com/jjxliu306/ng-form-element , 演示地址: http://jjxliu306.gitee.io/ng-form-element/
iview: https://gitee.com/jjxliu306/ng-form-iview , 演示地址:https://jjxliu306.github.io/ng-form-iview/dist
示例
基础表单
动态表格
简介
基于vue和element-ui/iview实现的表单设计器。通过拖拽方式快速生成一个表单页面,表单可以导出json格式,也可以将其他人绘制的表单通过json导入方式进行还原。
和其他开源表单的差别
- 每个组件可以动态隐藏和显示,并且提供除了“必填”以外的多种规则验证,支持表达式验证和正则验证
- 隐藏的组件绑定值可以配置不输出,减少输出数据大小
- 针对选择性控件(radio,select,checkbox)提供选择后触发调用,支持表达式。对选择性控件支持数据联动功能,通过此功能可以做多级联动
- 动态表格提供单独的弹框进行填写和编辑
- 提供栅格,表格,可扩展面板等多种组件布局方式
- 支持表单预览模式,表单内容全部文本显示
- 针对选择控件(radio,select,checkbox)选择后将对应的label进行单独存储,方便展示
组件
- ng-form-design 表单设计器(基于可视化操作快速设计出表单页面,生成配置json或页面)
- ng-form-build 表单构建器(根据设计器中获取的配置json数据,快速构建出表单页面,添加readonly属性后展现预览表单)
使用
安装
npm install --save ng-form-element // iview版本为 ng-form-iview
引用
//导入组件库 iview版本 import NgForm from 'ng-form-element' import 'ng-form-iview/lib/ng-form-iview.css'
注册
// 注册组件库 Vue.use(NgForm)
页面引用
<div id="app"> <ng-form-design /> </div>
API 说明
1. 表单绘制组件 ng-form-design
方法名称 | 参数 | 说明 |
initModel | json | 初始化动态表单内容,参数为动态表单json模板 |
getModel | N/A | 返回当前正在编辑得动态表单信息 |
属性名 | 说明 | 格式 | 默认值 |
customComponents | 自定义组件的配置,具体参加最下方自定义组件示例中的格式 | array | N/A |
config | 表单的一些基础配置,主要为http的一些参数,譬如在http请求中给header增加参数:config: { httpConfig: (config)=>{ config.headers['aaaa'] = 'bbbb' return config } } | object | N/A |
clear | 是否显示面板上清除按钮 | boolean | true |
preview | 是否显示面板上预览按钮 | boolean | true |
reder | 是否显示面板上渲染按钮 | boolean | true |
imp | 是否显示面板上导入按钮 | boolean | true |
exp | 是否显示面板上导出按钮 | boolean | true |
插槽名称 | 说明 |
drag | 左侧组件面板插槽,可以在组件面板上面填充一个区域展示内容 |
formName | 当前动态表单名称 |
controlButton | 功能区按钮,如果需要自定义功能按钮可以在这里自定义 |
插槽示例:
<ng-form-design > <template slot="controlButton" > <el-button type="text" size="medium" @click="initDemo(1)">示例1</el-button> <el-button type="text" size="medium" @click="initDemo(2)">示例2</el-button> <el-button type="text" size="medium" @click="initDemo(3)">示例3</el-button> </template> <template slot="formName"> <span> vue-drag-formdesign 示例 </span> </template> </ng-form-design>
2. 表单查看/填报组件 ng-form-build
方法:
reset | N/A | 重置动态表单内容 |
validator | N/A | 根据设置的规则验证当前表单内容,返回Promise |
getData | N/A | 表单验证后,获取当前表单数据,返回Promise |
属性:
formTemplate | 表单模板 | json | 无 |
models | 表单填充数据 | json | 无 |
disabled | 是否禁用 | boolean | false |
renderPreview | 当前是否为预览模式 | boolean | false |
config | 表单的一些基础配置,主要为http的一些参数,譬如在http请求中给header增加参数:config: { httpConfig: (config)=>{ config.headers['aaaa'] = 'bbbb' return config } } | object | N/A |
customComponents | 自定义组件的配置,具体参加最下方自定义组件示例中的格式 | array | N/A |
使用示例:
<template> <div id="app"> <ng-form-build :formTemplate="formTemplate" :models="models"/> </div> </template> <script> export default { data(){ return { models: {} , formTemplate: {} } }, created() { this.formTemplate = require('./data/basic.json') } } </script>
自定义组件示例
3.1 自定义一个组件(根据文本中输入的地址展示图片)
<template> <div> <el-input v-if="!preview" type="textarea" autosize placeholder="请输入图片地址" v-model="models[record.model]" :disabled="disabled"> </el-input> <el-image :style="record.options.style ? record.options.style : null" :src="models[record.model]" fit="scale-down"></el-image> </div> </template> <script> export default { props: { record: {//组件数据 type: Object, required: true }, models: {// 表单数组 type: Object, required: true }, disabled: { // 是否禁用 type: Boolean, default: false } , preview: {// 是否当前是预览 type: Boolean , default: false } }, methods: { } } </script>
3.2 定义一个自定义组件的属性配置组件(后面通过插槽挂载表单绘制面板的属性面板中)
<template> <!-- 自定义组件的属性配置 --> <el-form v-show="selectItem.key" size="mini" :disabled="disabled"> <!-- TCustom start--> <template v-if="selectItem.type == 'customT'"> <!-- 开关的label --> <el-form-item label="图片样式"> <el-input type="textarea" placeholder="请输入" v-model="selectItem.options.style" /> </el-form-item> </template> <!-- TCustom end --> </el-form> </template> <script> export default { props: { selectItem: { // 当前选择的组件 type: Object, required: true }, disabled: { // 是否禁用 type: Boolean, default: false } } } </script>
3.3 在动态表单绘制面板中进行配置
<template> <div id="app"> <ng-form-design ref="formDesign" :custom-components="customComponents" > <!-- 自定义属性配置 --> <template slot="custom-properties" slot-scope="{selectItem}"> <Properties :selectItem="selectItem"/> </template> <template slot="formName"> <span> vue-drag-formdesign 示例 </span> </template> </ng-form-design> </div> </template> <script> // 引用自定义的表单组件和自定义组件配置信息修改组件 import CustomT from './components/TCustom' import Properties from './components/properties' export default { name: 'App', components: {CustomT , Properties}, data(){ return { // 自定义组件列表 customComponents: [ { type: 'customT' , label: "自定义图片展示", // 标题文字 component: CustomT , options: { style: 'width:100px;height:100px' }, model: "customT", key: "customT", rules: [ { required: false, message: "必填项" } ] }, ] } } , methods: { } } </script>
交流
点击链接加入群聊,可以直接提问及反馈bug 【交流群:203205848】
相关推荐
动态表单,VUE动态表单。基于vue+element ui实现动态表单组件,通过拖拽组件到面板即可实现一个表单。支持各个组件的动态隐藏显示,动态表格弹窗式维护。致力打造开源最强vue动态表单组件,持续维护
vue_form_design:基于Vue3.0的表单设计器
动态表单,VUE动态表单。基于vue+element ui实现动态表单组件,通过拖拽组件到面板即可实现一个表单。支持各个组件的动态隐藏显示,动态表格弹窗式维护。致力打造开源最强vue动态表单组件,持续维护
一个通过拖拽生成表单页面的平台,基于Vue.js和Element UI开发,并生成表单源代码(WYSIWYG),可以让表单开发简单而高效。 本项目在基础上二次开发,目的是生成表单的Element UI原始代码,然后将生成的源码放在项目...
基于Vue的可视化表单设计器,让表单开发简单而高效;高级版本目前已支持 Vue3。MakingForm 表单设计器(基于可视化操作快速设计出表单页面)。GenerateForm 表单生成器(根据设计器中获取的配置 json 数据,快速渲染...
vue-ajax-form-component, 用于创建简单AJAX窗体的Vue.js 组件 vue-ajax-form-component用于创建简单AJAX表单的 Vue.js 插件组件。安装通过npm作为 vue-ajax-form-component 可用。 或者作为 inline 脚本包括在 ...
寒假结束了,趁着寒假,自己玩了一下element和echarts去实现了一个简单的后台管理系统。项目比较简单,十分适合入门,涉及到了轮播图,表格,... |---Form.vue // 表单组件 |---Tables.vue // 表格组件 |---TheHeader
整个项目最终实现的是一个自定义表单系统,用户可以用鼠标拖拽生成自己的表单,并填充和发布表单 目录 PS:整个项目是包含前端vue-form和合并vue-node项目的 前端项目 ├─vue-form │ ├─build -----------------...
一款高效的Vue低代码表单、工作流表单,包含表单设计器和表单渲染器,可视化设计,一键生成源码,
app文件为入口文件,caturemodel文件为验证码模块代码,form文件为处理表单代码,model文件为数据库模型python-orm。requirements.txt 文件为python库文件 需要执行pip3 install requirements.txt安装库。环境需要...
因为喜爱, 所以坚持:smiling_face_with_smiling_eyes: 开源项目列表 :backhand_index_pointing_down:vue-ele-form 基于 element-ui 的数据驱动表单组件(最得意之作) vue-ele-form-generator vue-ele-form-generator ...
使用Vue.js进行表单验证2 这是我在有关表单验证的教程的源代码。 验证在文件中执行。 如果要运行它,请下载此存储库的代码并运行: yarn install yarn run dev
form-create 是基于 Vue开发的开源项目,可快速生成 iviewUI 的表单元素。目的是节省开发人员在表单页面上耗费的时间,从而更专注于功能开发。使用 form-creae 可快速、便捷的生成日常开发中所需的各种表单。 下面向...
技术栈:Vue全家桶,打字稿,蚂蚁设计UI组件库 Vue实例方法 以下是项目中给Vue添加的实例方法,排除Vue自带的方法 $ message,$ notification,$ info,$ success,$ error,$ warning,$ confirm,$ form:ant ...
使用基于 Vue 2.0 的桌面端组件库 Elemnet ,使用广泛,扩展方便。 栅格布局 通过栅格进行表单布局,可以嵌套使用,支持 Flex,基本可覆盖复杂的表单布局场景。 自定义 提供自定义区域和自定义样式扩展,可以简单...
使用Vue.js的动态表单 该存储库包含“课程的示例代码。 在本课程中,学习如何使用Vue.js创建Badass动态表单。 动态表单是具有多个步骤的表单。 它们通常也称为表单向导,在其中您需要完成一系列步骤,然后才能完成...
form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定。 文档 | github 演示...
DWSurvey是一款简单、高效、成熟、稳定、专业的开源问卷系统,自2012年启动至今经过9年的积累,已经形成一套完善的基于 JAVA WEB 的开源问卷表单解决方案。 另外全新的社区版也已经发布,前后端分别采用Vue、...
支持组件拖拽、导出为vue文件。 所见即所得 支持自定义扩展 支持任意模板片段 支持扩展模块 支持vue文件中的data、computed、watch、methods可视化维护 支持template节点中的props、style(暂时只支持静态样式)、...