基于 vue2.x + element-ui 我的自定义表单，你不试试么（三）

公司这两年做了一款档案项目，其中需要使用到自定义表单的功能，希望可以拖拽字段，自定义布局。因为公司的前任领导已经做过了两版自定义表单，但不具备拖拽和自定义布局的功能，所以我在阅读过前两版的代码，重新编写这个第三版的自定义表单，可以拖拽和自定义布局，字段关联校验等功能。大家有需要的可以看看，试试。

先上传送门

• 表单演示网站 daiter.cn/dlSmartForm…
• NPM www.npmjs.com/package...
• 个人博客 猫十一の纸盒子 -- 欢迎一起交流学习

下面我将从整个表单的设计来给大家介绍，我也将会把整个表单的设计介绍文档持续更新。本期主要介绍与字段相关的字段模板组件、字段属性配置组件、字段上报组件、字段详情组件。实现了让开发可以自定义自己的字段组件。

导读目录

• 字段模板组件
• 字段属性配置组件
• 字段上报组件
• 字段详情组件

TemplateComponent 模版组件

字段的模版组件，用于表单创建时展示的模板使用

组件名称：[fieldType]-template

Props

名称	说明	类型	默认值	必传
fieldObj	字段对象	Object	-	true
templateStyle	字段模版控件样式	Object	{}	true
showLabel	字段是否展示字段标签	Boolean	-	true
labelWidth	字段标签的展示宽度	String	100px	true
labelPosition	字段标签的展示位置	String	right	true

Inject

名称	说明	类型
fieldsArr	创建表单的字段集合	Array
customAttrs	自定义的组件属性	Object
scopedSlotsMap	自定义具名插槽的函数集合	Function(slotName, data)
eventBus	创建表单的事件中心，详细见下表	Object

EventBus

EventBus Props

名称	说明	类型
nodesMap	所有的布局节点集合	Object
draggingNode	被拖拽的节点	Object
focusNodeKey	当前聚焦的节点	String

EventBus Methods

名称	说明	参数
setDraggingNode	保存拖拽中节点	node
setFocusNodeKey	设置正在聚焦的节点	nodeKey

EventBus Events

名称	说明	参数
add-field	添加字段的回调事件	{ field, excludeMobile }
delete-field	删除字段的回调事件	{ field, excludeMobile }

ConfigComponent 属性配置组件

字段的属性配置组件，用于表单创建时的属性配置使用

组件名称：[fieldType]-config

Inject

名称	说明	类型	默认值	必传
customAttrs	自定义的组件参数对象	Object	-	-

Props

名称	说明	类型	默认值	必传
form	字段配置表单对象	Object	-	true
disabled	字段是否可配置	Boolean	false	false

ReportComponent 上报展示组件

字段的上报展示组件，用于表单上报使用

组件名称：[fieldType]-report

Inject

名称	说明	类型
customAttrs	自定义的组件属性	Object
scopedSlotsMap	自定义具名插槽的函数集合	Function(slotName, data)

Props

名称	说明	类型	默认值	必传
fieldObj	字段对象	Object	-	true
reportStyle	字段上报控件样式	Object	{}	true
showLabel	字段是否展示字段标签	Boolean	-	true
labelWidth	字段标签的展示宽度	String	100px	true
labelPosition	字段标签的展示位置	String	right	true

DetailComponent 详情展示组件

字段的详情展示组件，用于表单详情使用

组件名称：[fieldType]-detail

Inject

名称	说明	类型
customAttrs	自定义的组件属性	Object
scopedSlotsMap	自定义具名插槽的函数集合	Function(slotName, data)

Props

名称	说明	类型	默认值	必传
fieldObj	字段对象	Object	-	true
detailStyle	字段详情控件样式	Object	{}	true
showLabel	字段是否展示字段标签	Boolean	-	true
labelWidth	字段标签的展示宽度	String	100px	true
labelPosition	字段标签的展示位置	String	right	true

博主将持更新表单的介绍文档，欢迎大家来使用指导