vue+element-ui的form多表单组件及Descriptions详情页面封装（可实现单页面有多个表单/详情按模块的方式展示并且可以收缩）

一、最终效果

二、组件集成了以下功能

1、可以多模块配置form表单——配置formOpts对象
2、每个模块可以收起或展开——模块不设置title值取消此功能（或者设置disabled:true）
3、每个模块可以自定义插槽设置
4、头部标题可以显示隐藏——有title则显示没有则隐藏
5、可以自定义设置footer操作按钮（默认：表单显示取消和保存按钮；详情显示取消按钮）——设置 :footer="null"
6、多表单校验不通过可以指定哪个模块
7、可以设置tabs（默认展示第一个tab；可以指定展示某一个根据setSelectedTab方法）
8、头部返回操作默认返回上一页，若需要自定义可以设置isGoBackEvent
9、多模块详情页面value值可以自定义插槽
10、多模块详情页面value值可以自定义tip(提示)
11、多模块表单或详情页面如果不使用手风琴收缩功能可以设置“disabled:true”

三、注意点

1、el-descriptions与el-descriptions-item组件无效时要注意更新最新element-ui版本

2、多模块表单是基于我之前封装的t-form组件

四、组件及demo地址

组件及demo地址

五、参数配置

配置参数（Attributes）

参数	说明	类型	默认值
title	头部返回按钮标题	string	无
subTitle	头部副标题	string	无
extra	操作区，位于 title 行的行尾(右侧)	slot	无
footer	底部操作区（默认展示“取消/保存”按钮；使用插槽则隐藏）footer="null"时隐藏底部操作	String/slot	无
tabs	页面展示是否需要页签（并且 tabs 的 key 是插槽）	Array	无
isGoBackEvent	点击头部返回（默认返回上一页，设置此值可以自定义 back 事件）	Boolean	false
handleType	显示方式（edit 表 form 表单操作，desc 表详情页面）	string	edit
----edit	handleType=edit 表 form 表单操作的属性	-	-
------formOpts	表单配置描述，支持多分组表单	Object	无
------submit	保存时(调用 saveHandle 方法 )，返回 promise 可自动显示 loading	function	所有表单数据
-----desc	handleType=desc 表详情页面的属性	-	-
------descColumn	详情页面展示每行显示几列（handleType= desc 生效）	Number	4
------descData	详情页面配置描述，支持多分组表 （handleType= desc 生效）	Object	无

descData 配置参数

参数	说明	类型	默认值
title	详情标题(是否显示控制折叠面板功能)	String	无
slotName	插槽(自定义详情数据)有插槽就无需配置 data	slot	无
name	每组详情定义的名字（作用：是否默认展开）	String	无
disabled	禁用时取消收缩功能及隐藏 icon）	Boolean	false
data	详情配置项	Object	无
----label	详情字段说明标题	String	无
----value	详情字段返回值	String	无
----slotName	插槽（自定义 value）	slot	无
----span	占用的列宽，默认占用 1 列，最多 4 列	Number	1
----tooltip	value 值的提示语	String/function	无

formOpts 配置参数

参数	说明	类型	默认值
title	表单标题(是否显示控制折叠面板功能)	String	无
slotName	插槽(自定义表单数据)有插槽就无需配置 opts	slot	无
name	每组表单定义的名字（作用：是否默认展开）	String	无
widthSize	每行显示几个输入项（默认两项） 最大值 4	Number	3
disabled	禁用时取消收缩功能及隐藏 icon）	Boolean	false
opts	表单配置项	Object	无

opts 配置参数

参数	说明	类型	是否必须
rules	规则（可依据 elementUI el-form 配置————对应 formData 的值）	Object/Array	否
operatorList	操作按钮 list	Array	否
listTypeInfo	下拉选择数据源（type:'select’有效）	Object	否
labelWidth	label 宽度(默认值 120px)	String	否
formData	表单提交数据(对应 fieldList 每一项的 value 值)	Object	是
fieldList	form 表单每项 list	Array	是
----slotName	自定义表单某一项输入框	slot	否
----comp	form 表单每一项组件是输入框还是下拉选择等（可使用第三方 UI 如 el-select/el-input 也可以使用自定义组件）	String	是
----bind	表单每一项属性（继承第三方 UI 的 Attributes，如 el-input 中的 clearable 清空功能）默认清空及下拉过滤	Object	否
----type	form 表单每一项类型	String	是
----widthSize	form 表单某一项所占比例(如果一行展示可以设值：1)	Number	否
-------arrLabel	type=select-arr 时，每个下拉显示的中文	String	否
-------arrKey	type=select-arr 时，每个下拉显示的中文传后台的数字	String	否
----label	form 表单每一项 title	String	是
----labelRender	自定义某一项 title	function	是
----value	form 表单每一项传给后台的参数	String	是
----rules	每一项输入框的表单校验规则	Object/Array	否
----list	下拉选择数据源（仅仅对 type:'select’有效）	String	否
----event	表单每一项事件标志（handleEvent 事件）	String	否
----className	如果某一项需要一行显示则设置：className:‘t-form-block’	String	否

events

事件名	说明	返回值
handleEvent	单个查询条件触发事件	fieldList 中的 event 值和对应输入的 value 值
tabsChange	点击 tab 切换触发	被选中的标签 tab 实例
validateError	校验失败抛出事件	obj——每个收缩块的对象
back	头部标题点击返回事件	-

Methods

事件名	说明	参数
resetFormFields	重置表单	-
clearValidate	清空校验	-
setSelectedTab	默认选中 tab	默认选中 tab 插槽名
saveHandle	异步 form 表单校验，生成 submit 属性（是个 function 并返回所有表单数据）	-

六、组件地址

gitHub组件地址

gitee码云组件地址

七、相关文章

基于Element-ui和ant-design-vue再次封装基础组件文档

---

vue+element-ui的table组件二次封装