elsa vue

elsa

⚡ elsa (eleme simple admin) is based on element-ui and encapsulates el-form, el-table and other components, and is suitable for rapid development of backend management projects.

For usage examples, see: 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
  • Supports setting of main and subtitles
• else-table
  • Configurable list columns
  • Support paging control
  • Supports tree-shaped data display and lazy loading
• elsa-form
  • Supported form components
    • el-input
    • el-radio
    • el-checkbox
    • el-select
    • el-upload
    • el-xxx-picker
  • Custom layout
  • Form checksum reset
  • Parsing of nested objects nest
  • Form overall disabled setting
  • Tip information for form items
  • Form items: dynamic/linked
    • disabled/enabled
    • show/hide
    • Dynamically modify multiple options options

elsa-table

usage:

1. Get the data source dataSource of Array type
2. Configure the displayed column information based on the object properties in the dataSource.
3. Set paging parameters 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

parameter	illustrate	type	Optional value	default value
columns	Column information	Array
dataSource	data source	Array
pagination	Pagination information	Object
...elProps	el-table attribute

ElsaTable.columns

parameter	illustrate	type	Optional value	default value
type	selection adds a selection box column index adds serial number column expand Show more	String	selection/index/expand
label	title	String
prop	parse fields	String
width	Corresponding column width	String
fixed	Whether the column is fixed to the left or right, true means fixed to the left	String/Boolean	true, left, right
formatter	Data formatting	Function(row, column, cellValue)
show-overflow-tooltip	Show tooltip when content is too long and is hidden	Boolean

For more details, see: el-table column

ElsaTable.elProps

parameter	illustrate	type	Optional value	default value
data	Replace with dataSource
border	Whether to have vertical borders	Boolean		false
size	size	String	medium/small/mini
fit	Whether the width of the column is self-supporting	Boolean		true

For more details, see: el-table attributes

ElsaTable Events

parameter	illustrate	type	Optional value	default value
selection-change	This event is triggered when the selection changes	Function(selections)

For more details, see: el-table events

? Note: Some Events are difficult to implement based on the current file structure (such as: sorting, filtering, merging forms...), and can be implemented by defining the content of the config file in data (instead of the import method)

elsa-form

usage:

1. Define form data model model
2. Configure the form field and define the layout (optional)

 < 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

parameter	illustrate	type	Optional value	default value
config	Form item configuration	Object
model	form data model	Object
layout	form layout	Arrray
disabled	The entire form is disabled	Boolean		false
...elProps	Form item configuration	Object

ElsaForm.config

parameter	illustrate	type	Optional value	default value
field	Form item fields, corresponding to model attributes	Object
field.label	name	String
field.elTag	element form tag	String	el-input/select/radio/cascader/date-picker/time-picker/upload
field.elAttrs	Form item attributes (refer to elTag corresponding component)	Object
field.elStyle	Form item style style	Object
field.extra	Prompt message	String
field.extraIcon	prompt message icon icon	String		el-icon-warning-outline
field.rules	Form validation rules	Array
field.options	When it is check, select is used as data display	Array
field.visible	Linkage, you can control the display and hiding according to model[filed]	Boolean/String/Function({model})
field.customRender	Template displayed on the right side of elTag	String
field.slotRender	Template inside elTag (for example: content in upload)	String

For more details, see: el-form-item methods

ElsaForm.field.elAttrs

Example of some special properties

parameter	illustrate	type	Optional value	default value
disabled	Disable	Function({model})/ Boolean
isRemote	elTag is lazy loading of el-select	Boolean
remoteMethod	elTag is lazy loading of el-select	Function(done,{model}) / Boolean
lazy	elTag is lazy loading of el-cascader	Boolean
lazyLoad	elTag is lazy loading of el-cascader	Function(node, resolve, { done }) / Boolean

ElsaForm.layout

parameter	illustrate	type	Optional value	default value
elTag	element form tag	String	el-row/col
elAttrs	Form item attributes (refer to elTag corresponding component)	Object
children	child	Object
field	form item fields	String

ElsaForm.elProps

parameter	illustrate	type	Optional value	default value
label-width	The width of the form field label	String
label-suffix	Suffix for form field labels	String
size	size	String	medium/small/mini

For more details, see: el-form attributes

ElsaForm Methods

parameter	illustrate	type	Optional value	default value
validate	Form data validation	Function(err,model)
resetFields	Reset form item	Function(props<Array | String>)
clearValidate	Clear verification results	Function(props<Array | String>)

For more details, see: el-form methods