第一部分 简介

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

1.1 特性

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

1.2 组件

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

第二部分 组件

2.1 FormDesign表单设计器

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

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

2.1.1 属性

2.1.2 插槽

2.1.3 方法

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 属性

2.2.2 方法

第三部分 二次开发

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

3.1 组件扩展

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

3.2 源码扩展