在开发过程中有一个可以让客户自己来设计表单的需求,看了多个动态表单生成的,最后选择了FormMaking,主要是这个基于vue和elmenet-ui的一款表单设计器,跟我们的项目更贴合。
FormMaking官网:http://docs.form.making.link
FormMaking在线demo:http://form.making.link/basic-version/#/zh-CN/
FormMaking使用教程:http://docs.form.making.link/guide.html(教程很详细,按照教程一步一步来就好了)
我每次都喜欢先看下效果图是不是自己想要的,再去看别人发的内容,所以都先放下图啦~
一、动态生成表单图:
操作中遇到的问题:安装后发现页面一直什么都没有,后来发现是FormMaking用的span标签包裹的
动态生成表单图:
1)安装:npm install form-making -S
2)引入(在mian.js中引入):
import FormMaking from 'form-making'
import {
GenerateForm,
MakingForm
} from 'form-making'
import 'form-making/dist/FormMaking.css'
Vue.use(GenerateForm)
Vue.use(MakingForm)
Vue.use(FormMaking)
3)在页面中中调用
<template>
<div class="dynamicForm">
<!-- 高级定义和布局字段 我不需要就设置为空啦 :advance-fields = '[]' :layout-fields = '[]' -->
<fm-making-form
ref="makingform"
style="height:800px;display: block;"
preview
:advance-fields = '[]'
:layout-fields = '[]'
>
<!-- 头部内容自定义,添加提交按钮 -->
<template slot="action">
<el-button type="primary" @click="handleSubmit">提交</el-button>
</template>
</fm-making-form>
</div>
</template>
<!-- 需要在设计器中预览代码需要引入ace.js库 (index.html中引入ace.js,可以预览生成的json或html,如果不引也可以生成,但没有解析格式样式。)-->
**<!-- 如何是不联网的话,可以参考下 https://www.jianshu.com/p/bb5109901132 ->**
<script src="https://unpkg.com/form-making/public/lib/ace/ace.js"></script>
<script>
export default {
data(){
return{
formName:'',
}
},
components:{ },
methods:{