前言
⚡ elsa-vue（eleme simple admin）一款基於 element-ui 封裝 el-form，el-table 等元件，用於快速開發後臺管理頁面的元件庫。
開發初衷由於公司業務需求，需要大量重構新建多個後端管理系統。對於任何一個後管系統來說都充斥著 大量的列表和表單頁，雖然 2021 了，可以找到各種開源 程式碼生成器，但放到現實中，會被各種因素影響的難以推行，甚至還不如自己重寫。
那必然要解決這樣的問題：如何讓團隊成員快速完成頁面開發，拿出更多的時間對接後端介面。
elsa-vue 就是在這樣的環境下誕生的，由於專案元件庫為 element-ui，就將常用的 el-form 和 el-table 程式碼進行二次封裝，儘可能的配置化，使我們能只關注 config.js 檔案，而不需要在邏輯中投入更多時間。
下面是 elsa-vue 的思維導圖：
不足和展望說來慚愧 vue3 正式版都發布了小半年到了 v3.0.5，element-ui 也搖身變成了 element-plus，但我依舊還停留在 vue2 裡。
對於 elsa-vue 也沒有支援更多的 element-ui 元件，目前也只是停留在表單和列表。
但總要有希望，一方面在公司業務系統中繼續提煉可在 elsa-vue 的元件；另一方面，會開始 vue3 的專案實踐，以及開始 elsa3-vue 的設計開發。
下面開始示例常用的用法。
elsa-table配置化的列表首先比如這樣的列表頁，用 element-table 元件如何實現？
<el-table :data="dataSource"> <el-table-column prop="date" label="日期" width="100"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column></el-table>來看看使用 elsa-table 元件的程式碼：
<elsa-table :columns="columns" :dataSource="dataSource"> </elsa-table>// data.columnsexport default [ { label: '日期', align: 'left', prop: 'date', width: '100' }, { label: '姓名', align: 'center', prop: 'name', width: '180' }, { label: '地址', align: 'left', prop: 'address' }]是不是很簡單？雖然額外多了一個描述 columns 屬性的檔案，但這只是為了業務 vue 檔案更簡潔。
我們可以不用 el-table-column 子元件來進行列資訊的描述。想象下，一個十幾個欄位的列表將會使得 template 多龐大？
程式碼示例對比：
這就是 elsa-vue 的核心特點：配置化。
支援分頁配置通常列表頁都需要一個分頁元件，你需要額外配置 el-pagination 元件，這會使得你的程式碼變成這樣：
<el-table :data="dataSource" style="width: 100%"> <el-table-column prop="date" label="日期" width="100"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column></el-table><el-pagination @size-change="sizeChange" @current-change="handleCurrentChange" :current-page="currentChange" :page-sizes="[10, 20, 30, 50]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>就這個小 demo 而言，模板已經 14 行之多，想象下實際開發中會有多少程式碼量？
而我們的 el-table 依舊簡潔：
<elsa-table v-loading="loading" :columns="columns" :dataSource="dataSource" :pagination="pagination"></elsa-table>對於分頁屬性只需要增加對於的 data.pagination 定義即可：
export default { data() { return { pagination: { pageSize: 10, currentPage: 1, total: 0, currentChange: (currentPage) => {}, sizeChange: (pageSize) => {}, }, //... }; },}和以前用 el-table 完全一樣，只是把 el-table-columns 的配置挪到了單獨的配置檔案中，並以 columns 進行描述。
這裡列舉常用的一些示例：
elsa-form配置化的表單elsa-form 和 elsa-table 一樣，都採用維護獨立的配置 js 檔案用來代替原先 el-form-item 的描述模板，這裡不過多展開對比。
比如要展示這樣的頁面：
最終我們的表單檔案將是這樣：
<elsa-form ref="myFormRef" :config="fields" :model="model" labelWidth="auto" label-suffix=":"> <template slot="nameCheck"> <el-button type="primary" size="small" style="margin-left:10px;">校驗</el-button> </template> <el-row type="flex" justify="center"> <el-button @click="submit" type="primary">提交</el-button> <el-button @click="reset" type="warning" style="margin-left:10px;">重置</el-button> </el-row></elsa-form>對應的 fields 和 model 如下：
import { fields } from './data/basicConfig'export default { data() { return { fields, model: { name: '', password: '', company: [], desc: '', end: '', skill: '' } } },}你應該已經熟悉了這樣的“套路”。值得一提的，我在 elsa-form 的內嵌模板中添加了表單操作按鈕，他們將作為預設 slot 展示在表單底部。
自定義佈局 layout除了原先 el-form inline 的單行佈局外，elsa-form 提供了 layout 屬性，內部使用 el-row/col 為佈局提供更多自定義可能。
對於上圖的佈局，你只需要新增 layout 屬性，並按照如下示例即可快速實現。
<elsa-form ref="myFormRef" :config="fields" :layout="layout" :model="model" labelWidth="auto" label-suffix=":">原先 el-form 的校驗，和重置方法提供的入參不適合我們業務的實際需要：
比如：
validate 除了報錯資訊外，還需要當前表單 model 的資料物件resetFields 能支援個別欄位的重置，而非所有欄位這裡做了二次封裝，重新規劃了引數：
業務需求將圍繞 field 配置檔案展開，並給出對應配置示例。
禁用+顯示/隱藏未輸入使用者名稱，年齡無法填寫（disabled）
年齡輸入大於 18 歲時，顯示身份證輸入框
select 的延遲載入和資料控制根據前後端，動態控制展示下拉框選項；並且下拉框資料為非同步載入得到。
select tags 多選模式級聯查詢（省市區）時間控制元件rules 校驗規則field 所支援特性目前支援 input、select、checkbox、update 等常用 el 表單元件，部分並做了封裝。未來會新增其他表單元件，及豐富目前元件功能。特性功能如下：
總結目前 elsa-vue 已投入公司內部專案使用，滿足日常需求，如果有各類問題可以 issue 給我，同時我會根據實際場景給出更多的使用範例，供剛接觸 vue 的同學參考。
github 地址（內含 examples）：https://github.com/eminoda/elsa