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

你可能感兴趣的:(前端,html,面试,vue.js,ui,前端)