升级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，我会把你拉到前端学习群。