升级vue-element-admin,高效开发后台管理系统
vue-element-admin作为一个后台前端解决方案,它丰富的插件、优雅的解决方案无需多言。然而在企业级中后台产品的开发中,我们最常遇到的需求就是列表页、详情页。vue-element-admin
的解决方案是直接使用element-ui
的el-table/el-form
实现了需求。由于列表页、详情页有很多的需求是相近甚至相同的,在这样的前提下, 我考虑是不是能基于vue-element-admin
打造更高效的中后台解决方案呢,于是有了vue-srm-admin
。
项目源码、案例展示、源码必知在文章末尾,请查收。
- 对页码、每页条数进行监听,当页码/每页条数变动之后,自动触发请求,获取对应数据源。
- 对搜索条件进行过滤,自动过滤无效属性。
- 标记请求中、请求完成状态。
- 判断当前列表是否需要刷新,如果需要刷新,完成自动刷新。
- 增加
mixinHandleItem
方法,需要操作列表数据时,使用此方法做中转简化数据操作与回调动作(如果需要)。
- 引入
SrmDialogCheck
组件,如果操作数据前需要确认,可对其传入需要操作的一项或多项数据完成确认提示。
- 根据
id
设置当前页的标题后缀:
- 自定义标题后缀:
goListWithRefresh
方法:标记需要刷新的页面,并根据参数判断是否需要立即返回。
简介:SrmTable
用与列表页中的列表数据展示,它是基于配置展示所需数据。拥有自定义slot、render渲染、formatter等功能使其在快速开发的前提下同时拥有极高的可定制能力。另外,它还无需任何多余操作即可根据表格展示列导出Excel文件。
参数 |
说明 |
类型 |
默认值 |
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[] |
[] |
方法名 |
说明 |
参数 |
selectionChange |
当选择项发生变化时会触发该事件 |
selection |
handleBatchDelete |
点击批量删除会触发该事件 |
selection |
changePage |
切换页码时触发该事件 |
page |
changeSize |
切换每页条数时触发该事件 |
pagesize |
name |
说明 |
buttons |
表格上方区域(一般用于展示按钮) |
表格代码演示
SrmForm
基于配置生成表单,可快速完成详情页编辑、列表页筛选等功能。
参数 |
说明 |
类型 |
默认值 |
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 |
方法名 |
说明 |
参数 |
submit |
点击提交会触发该事件 |
无 |
after-reset |
点击重置按钮会触发该事件 |
无 |
name |
说明 |
buttons |
表单下方区域(一般用于展示按钮) |
表单代码演示
- functional(函数化组件)
- v-bind
- 自定义v-model
- .sync
- 动态组件
- v-on
- $listeners
- findComponents 系列方法
- proxy
- $attrs
项目源码
项目预览
vue-srm-admin
对表格、表单进行了高度封装,同时加入常用mixin
,大幅提升了我在开发公司后台管理系统时的效率和质量。相信对您也有所帮助。Let's go!
- vue-element-admin基础模板
- 我是如何让公司后台管理系统焕然一新的(下)-封装组件
- 手摸手,带你用vue撸后台 系列四(vueAdmin 一个极简的后台基础模板)
前端交流学习,欢迎加我微信好友 13216698987
,我会把你拉到前端学习群。