elsa vue

elsa

⚡ elsa（eleme simple admin）基於element-ui 封裝el-form，el-table 等元件，適用於快速開發後台管理專案。

用法範例，見：example

Quickstart

 npm i elsa - vue - S 

 // vue main.js
import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Elsa from 'elsa-vue'

Vue . use ( Element )
Vue . use ( Elsa ) 

Feature

• else-card
  • 支援主副標題的設置
• else-table
  • 可配置清單列
  • 支援分頁控件
  • 支援樹形資料展示及懶加載
• elsa-form
  • 支援的表單組件
    • el-input
    • el-radio
    • el-checkbox
    • el-select
    • el-upload
    • el-xxx-picker
  • 自訂佈局
  • 表單校驗和重置
  • 嵌套物件nest 的解析
  • 表單整體disabled 設定
  • 表單項目的提示tip 訊息
  • 表單項目：動態/連動
    • 禁用/可用
    • 顯示/隱藏
    • 動態修改多選項options

elsa-table

用法：

1. 取得Array 類型的資料來源dataSource
2. 根據dataSource 中的物件屬性，配置顯示的列columns 訊息
3. 設定分頁參數pagination

 < elsa-table border :columns =" columns " :dataSource =" dataSource " :pagination =" pagination " /> 

 export default {
  data ( ) {
    return {
      dataSource : [
        { name : 'eminoda' , age : 30 } ,
        { name : 'foo' , age : 40 } ,
        { name : 'bar' , age : 50 }
      ] ,
      columns : [
        { label : '序号' , align : 'center' , type : 'index' , width : '50' } ,
        { label : '姓名' , align : 'center' , prop : 'name' , width : '100' } ,
        { label : '年龄' , align : 'center' , prop : 'age' , width : '100' }
      ] ,
      pagination : {
        pageSize : 10 ,
        currentPage : 1 ,
        total : 0 ,
        currentChange : currentPage => { } ,
        sizeChange : pageSize => { }
      }
    }
  }
}

ElsaTable Attributes

參數	說明	類型	可選值	預設值
columns	列訊息	Array
dataSource	資料來源	Array
pagination	分頁訊息	Object
...elProps	el-table 屬性

ElsaTable.columns

參數	說明	類型	可選值	預設值
type	selection 新增選擇框列 index 新增序號列 expand 展示更多內容	String	selection/index/expand
label	標題	String
prop	解析字段	String
width	對應列的寬度	String
fixed	列是否固定在左側或右側，true 表示固定在左側	String/Boolean	true, left, right
formatter	資料格式化	Function(row, column, cellValue)
show-overflow-tooltip	當內容過長被隱藏時顯示tooltip	Boolean

更多詳見：el-table column

ElsaTable.elProps

參數	說明	類型	可選值	預設值
data	以dataSource 代替
border	是否有縱向邊框	Boolean		false
size	尺寸	String	medium / small / mini
fit	列的寬度是否自撐開	Boolean		true

更多詳見：el-table attributes

ElsaTable Events

參數	說明	類型	可選值	預設值
selection-change	當選擇項發生變化時會觸發該事件	Function(selections)

更多詳見：el-table events

? 註：部分Events 根據現在檔案結構實作較困難（例如：排序，過濾，合併表單...），可把config 檔案內容定義在data 中來實作（而非import 方式）

elsa-form

用法：

1. 定義表單資料模型model
2. 配置表單項目field ，定義佈局（可選）

 < elsa-form :config =" fields " :model =" model " labelWidth =" auto " label-suffix =" : " >
  < 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 > 

 export default {
  data ( ) {
    return {
      fields : {
        name : {
          label : '用户名' ,
          elTag : 'el-input' ,
          elAttrs : {
            placeholder : '请输入用户名'
          } ,
          customRender : 'nameCheck' ,
          rules : [ { required : true , message : '用户名不能为空' , trigger : 'change' } ]
        } ,
        password : {
          label : '密码' ,
          elTag : 'el-input' ,
          elAttrs : {
            type : 'password' ,
            showPassword : true
          } ,
          rules : [ { required : true , trigger : 'change' } ]
        }
      } ,
      model : {
        name : '' ,
        password : ''
      }
    }
  }
}

ElsaForm Attributes

參數	說明	類型	可選值	預設值
config	表單項目配置	Object
model	表單資料模型	Object
layout	表單佈局	Arrray
disabled	表單整體禁用	Boolean		false
...elProps	表單項目配置	Object

ElsaForm.config

參數	說明	類型	可選值	預設值
field	表單項目字段，與model 屬性對應	Object
field.label	名稱	String
field.elTag	element 表單標籤	String	el-input/select/radio/cascader/date-picker/time-picker/upload
field.elAttrs	表單項屬性（參考elTag 對應元件）	Object
field.elStyle	表單項目style 樣式	Object
field.extra	提示訊息	String
field.extraIcon	提示資訊icon 圖標	String		el-icon-warning-outline
field.rules	表單校驗規則	Array
field.options	當為check，select 作為資料展示	Array
field.visible	聯動，可根據model[filed] 來控制顯示隱藏	Boolean/String/Function({model})
field.customRender	展示於elTag 右側的模板	String
field.slotRender	elTag 內部的模板（例如：upload 中的內容）	String

更多詳見：el-form-item methods

ElsaForm.field.elAttrs

範例一些特殊屬性

參數	說明	類型	可選值	預設值
disabled	停用	Function({model})/ Boolean
isRemote	elTag 為el-select 的延遲載入	Boolean
remoteMethod	elTag 為el-select 的延遲載入	Function(done,{model}) / Boolean
lazy	elTag 為el-cascader 的延遲加載	Boolean
lazyLoad	elTag 為el-cascader 的延遲加載	Function(node, resolve, { done }) / Boolean

ElsaForm.layout

參數	說明	類型	可選值	預設值
elTag	element 表單標籤	String	el-row/col
elAttrs	表單項屬性（參考elTag 對應元件）	Object
children	子項	Object
field	表單項目字段	String

ElsaForm.elProps

參數	說明	類型	可選值	預設值
label-width	表單域標籤的寬度	String
label-suffix	表單域標籤的後綴	String
size	尺寸	String	medium / small / mini

更多詳見：el-form attributes

ElsaForm Methods

參數	說明	類型	可選值	預設值
validate	表單資料校驗	Function(err,model)
resetFields	重設表單項	Function(props<Array | String>)
clearValidate	校驗結果清空	Function(props<Array | String>)

更多詳見：el-form methods