一、最终效果
二、组件集成了以下功能
1、可以多模块配置form表单——配置formOpts对象
2、每个模块可以收起或展开——模块不设置title值取消此功能
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-simple-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 并返回所有表单数据）
-
六、组件地址
七、相关文章
基于Element-ui和ant-design-vue再次封装基础组件文档