第一部分简介

element-form-design是基于Vue2.0+Element的可视化表单设计器，提供表单设计器（FormDesign）和表单生成器（FormBuild）两个组件，通过表单设计器快速设计出表单页面，使用表单生成器快速渲染出表单页面。

设计界面

preview

1.1 特性

可视化：通过可视化操作，方便快捷的完成表单页面创建
Element：基于 Vue2.0 的桌面端组件库Element，使用广泛，扩展方便
丰富的布局：提供栅格、表格布局方式，满足各种布局需要
自定义：提供了自定义的扩展，可以简单方便的将自己的组件放入表单中进行构建
易维护：各表单组件渲染与配置独立，通过策略模式实现各组件松耦合

1.2 组件

FormDesign 表单设计器：基于可视化操作快速设计出表单页面
FormBuild 表单构建器：通过表单设计器生成配置快速构建出表单页面

第二部分组件

2.1 `FormDesign`表单设计器

基于可视化操作快速设计出表单页面

<template>
  <element-form-design />
</template>

2.1.1 属性

参数	说明	类型	默认值
component-width	左侧组件面板宽度	number	260
config-width	右侧配置面板宽度	number	260
min-design-width	设计面板最小宽度	number	300
header-height	顶栏高度	number	40
tool-bar-height	中间设计面板工具栏高度	number	40
footer-height	底栏高度	number	30
custom-components	自定义组件	object	—

2.1.2 插槽

name	说明
header	顶栏区域
toolBar	中间设计面板工具栏区域
footer	底栏区域

2.1.3 方法

方法	说明	参数
clear	清空设计数据	—
setData	设置设计数据，如果不传递参数等价于调用`clear`方法	Function(data: object)
getData	获取设计数据	—
extractModels	提取表单默认数据	—

2.2 `FormBuild`表单构建器

通过表单设计器生成配置快速构建出表单页面

<template>
  <element-form-build :data="data" :models="models"/>
</template>
<script>
export default {
  components: {
    ElementFormBuild
  },
  data() {
    return {
      data: {},
      models: {}
    }
  }
}
</script>

2.2.1 属性

参数	说明	类型	默认值
data	表单设计数据	object	—
models	表单数据	object	{}
custom-components	自定义组件	object	—

2.2.2 方法

方法	说明	参数
validate	对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 `promise`	Function(callback: Function(boolean, object))
validateField	对部分表单字段进行校验的方法	Function(props: array \| string, callback: Function(errorMessage: string))
resetFields	对整个表单进行重置，将所有字段值重置为初始值并移除校验结果	—
clearValidate	移除表单项的校验结果。传入待移除的表单项的`prop`属性或者`prop`组成的数组，如不传则移除整个表单的校验结果	Function(props: array \| string)
getRawModel	获得表单原始数据	—

第三部分二次开发

element-form-design支持开发者扩展自己的组件或者替换现有组件，扩展有两种方式：组件扩展和源码扩展

3.1 组件扩展

组件扩展是指通过custom-components属性注入自定义组件信息。

蒋固金 / element-form-design

第一部分简介

1.1 特性

1.2 组件

第二部分组件

2.1 `FormDesign`表单设计器

2.1.1 属性

2.1.2 插槽

2.1.3 方法

2.2 `FormBuild`表单构建器

2.2.1 属性

2.2.2 方法

第三部分二次开发

3.1 组件扩展

3.2 源码扩展

简介

发行版

贡献者

近期动态

蒋固金 / element-form-design .gitee-modal { width: 500px !important; }

第一部分 简介

1.1 特性

1.2 组件

第二部分 组件

2.1 FormDesign表单设计器

2.1.1 属性

2.1.2 插槽

2.1.3 方法

2.2 FormBuild表单构建器

2.2.1 属性

2.2.2 方法

第三部分 二次开发

3.1 组件扩展

3.2 源码扩展

简介

发行版

贡献者

近期动态

搜索帮助

蒋固金 / element-form-design

第一部分简介

第二部分组件

2.1 `FormDesign`表单设计器

2.2 `FormBuild`表单构建器

第三部分二次开发