MakingForm 表单设计器

通过拖拽快速配置出表单页面

简单例子

<template>
  <fm-making-form 
    ref="makingform" 
    style="height: 500px;" 
    preview 
    generate-code 
    generate-json
  >
    <template slot="action">
    </template>
  </fm-making-form>
</template>

使用时需要设置设计器的高度,默认情况高度是根据父元素 100% 来渲染的

自定义操作按钮

<template>
  <fm-making-form 
    ref="makingform" 
    style="height: 500px;" 
  >
    <template slot="action">
      <!-- 自定义操作区域插槽 -->
      <el-button type="text" icon="el-icon-upload">保存</el-button>
    </template>
  </fm-making-form>
</template>

字段配置

<template>
  <fm-making-form 
    ref="makingform" 
    style="height: 500px;"
    :basic-fields="['input', 'textarea']"
    :advance-fields="['blank', 'fileupload']"
    :layout-fields="[]"
  >
  </fm-making-form>
</template>

Attributes

参数 说明 类型 默认值
preview 设计器预览操作按钮显示 Boolean fasle
generate-json 设计器生成JSON按钮显示 Boolean false
generate-code 设计器生成代码按钮显示 Boolean false
clearable 设计器清空按钮显示 Boolean false
upload 设计器导入JSON按钮显示 Boolean false
basic-fields 设计器左侧基础字段配置,如果不设置该字段默认展示所有基础字段组件,请参考文档后面字段说明 Array ['input', 'textarea', 'number', 'radio', 'checkbox', 'time', 'date', 'rate', 'color', 'select', 'switch', 'slider', 'text']
advance-fields 设计器左侧高级字段配置,如果不设置该字段默认展示所有高级字段组件,请参考文档后面字段说明 Array ['blank', 'fileupload', 'imgupload', 'editor', 'cascader', 'table']
layout-fields 设计器左侧布局字段配置,如果不设置该字段默认展示所有布局字段组件,请参考文档后面字段说明 Array ['grid', 'tabs', 'divider']

Slots

name 说明
action 设计器头部操作按钮自定义区域

方法

通过 ref 可以获取到 MakingForm 实例并调用实例方法

方法名 说明 参数
getJSON 获取设计器配置的JSON数据 -
getHtml 获取设计器生成的可以直接使用的HTML代码 -
setJSON 设置设计器的配置信息 (value) 通过getJSON方法获取的JSON数据

字段说明

表单设计器左侧字段详细说明,可通过 type 值配置左侧展示字段

基础字段

type 字段名 说明
input 单行文本
textarea 多行文本
number 计数器
radio 单选框组
checkbox 多选框组
time 时间选择器
date 日期选择器
rate 评分
color 颜色选择器
select 下拉选择框
switch 开关
slider 滑块
text 文字

高级字段

type 字段名 说明
blank 自定义
imgupload 图片
editor 编辑器
cascader 级联选择器
fileupload 文件 高级版本提供
table 子表单 高级版本提供

布局字段

type 字段名 说明
grid 栅格布局
tabs 标签页 高级版本提供
divider 分割线 高级版本提供