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

一、最终效果

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

二、组件集成了以下功能

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 并返回所有表单数据)

-

六、组件地址

gitHub组件地址

gitee码云组件地址

七、相关文章

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


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

上一篇:从0到1完成appium+pytest+allure框架-加入log


下一篇:最新OpenCV2.4.6与VS2010开发环境搭建