Skip to content
升级vue-element-admin,高效开发后台管理系统
JavaScript Vue CSS HTML Dockerfile
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
mock
public
src
tests/unit
.editorconfig
.env.development
.env.production
.env.staging
.eslintignore
.eslintrc.js
.gitignore
.travis.yml
Dockerfile
LICENSE
README.md
babel.config.js
default.conf
jest.config.js
package.json
postcss.config.js
vue.config.js
yarn.lock

README.md

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

前言

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

vue-srm-admin做了什么

pageMixin:列表页功能集成

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

detailMixin:详情页功能集成

  1. 根据id设置当前页的标题后缀:
    title-by-id
  2. 自定义标题后缀:
    title-by-id
  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,我会把你拉到前端学习群。

You can’t perform that action at this time.