升級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，我會把你拉到前端學習羣。