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

一、最终效果

二、组件集成了以下功能

1、可以多模块配置form表单——配置formOpts对象
2、每个模块可以收起或展开——模块不设置title值取消此功能(或者设置disabled:true3、每个模块可以自定义插槽设置
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组件二次封装

你可能感兴趣的:(vue.js,elementui,组件化,form表单,详情组件)