升级vue-element-admin，高效开发后台管理系统

前言

vue-element-admin作为一个后台前端解决方案，它丰富的插件、优雅的解决方案无需多言。然而在企业级中后台产品的开发中，我们最常遇到的需求就是列表页、详情页。vue-element-admin的解决方案是直接使用element-ui的el-table/el-form实现了需求。由于列表页、详情页有很多的需求是相近甚至相同的，在这样的前提下， 我考虑是不是能基于vue-element-admin打造更高效的中后台解决方案呢，于是有了vue-srm-admin。 项目源码、案例展示、源码必知在文章末尾，请查收。

vue-srm-admin做了什么

pageMixin：列表页功能集成

1. 对页码、每页条数进行监听，当页码/每页条数变动之后，自动触发请求，获取对应数据源。
2. 对搜索条件进行过滤，自动过滤无效属性。
3. 标记请求中、请求完成状态。
4. 判断当前列表是否需要刷新，如果需要刷新，完成自动刷新。
5. 增加mixinHandleItem方法，需要操作列表数据时，使用此方法做中转简化数据操作与回调动作（如果需要）。
6. 引入SrmDialogCheck组件，如果操作数据前需要确认，可对其传入需要操作的一项或多项数据完成确认提示。

detailMixin：详情页功能集成

1. 根据id设置当前页的标题后缀：
   
2. 自定义标题后缀：
   
3. goListWithRefresh方法：标记需要刷新的页面，并根据参数判断是否需要立即返回。

SrmTable：配置式表格组件

简介：SrmTable用与列表页中的列表数据展示，它是基于配置展示所需数据。拥有自定义slot、render渲染、formatter等功能使其在快速开发的前提下同时拥有极高的可定制能力。另外，它还无需任何多余操作即可根据表格展示列导出Excel文件。

Attributes

参数	说明	类型	默认值
sourceData	显示的数据	array	必填
total	总条目数	number	必填
columns	需要展示的字段（参见下方代码演示）	array	必填
loading	是否加载中	boolean	false
selectVisible	是否可选择行	boolean	true
pageRequest	页码与每页条数	object	{page: 1,pageSize: 10}
exportVisible	是否可导出	boolean	true
deleteVisible	是否可以批量删除	boolean	true
exportName	导出文件默认名称	string	''
pageSizes	每页显示个数选择器的选项设置	number[]	[]

Events

方法名	说明	参数
selectionChange	当选择项发生变化时会触发该事件	selection
handleBatchDelete	点击批量删除会触发该事件	selection
changePage	切换页码时触发该事件	page
changeSize	切换每页条数时触发该事件	pagesize

Slot

name	说明
buttons	表格上方区域（一般用于展示按钮）

使用示例

表格代码演示

SrmForm：配置式表单组件

SrmForm基于配置生成表单，可快速完成详情页编辑、列表页筛选等功能。

Attributes

参数	说明	类型	默认值
v-model	表单数据对象	object	必填
formName	表单数据对象名称	string	必填
formItems	表单字段项（参见下方代码演示）	array	必填
inline	行内表单模式	boolean	false
submitMsg	提交按钮文案(值为false时隐藏按钮)	string | boolean	提交
resetMsg	重置按钮文案(值为false时隐藏按钮)	string | boolean	重置
labelWitdh	表单域标签的宽度	string	auto
size	用于控制该表单内组件的尺寸	string	small
showBack	是否展示返回按钮	boolean	true
gutter	栅格间隔（当inline值为true时无效）	number	24
btnCol	按钮区域布局（当inline值为true时无效）	string	24

Events

方法名	说明	参数
submit	点击提交会触发该事件	无
after-reset	点击重置按钮会触发该事件	无

Slot

name	说明
buttons	表单下方区域（一般用于展示按钮）

使用示例

表单代码演示

vue-srm-admin源码必知

1. functional(函数化组件)
2. v-bind
3. 自定义v-model
4. .sync
5. 动态组件
6. v-on
7. $listeners
8. findComponents 系列方法
9. proxy
10. $attrs

项目展示

项目源码 项目预览

总结

vue-srm-admin对表格、表单进行了高度封装，同时加入常用mixin，大幅提升了我在开发公司后台管理系统时的效率和质量。相信对您也有所帮助。Let's go!

参考

1. vue-element-admin基础模板
2. 我是如何让公司后台管理系统焕然一新的（下）-封装组件
3. 手摸手，带你用vue撸后台 系列四(vueAdmin 一个极简的后台基础模板)

前端交流学习，欢迎加我微信好友 13216698987，我会把你拉到前端学习群。