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