base-elsa-vue v1.0.5

elsa

:zap: elsa（eleme simple admin）基于 element-ui 封装 el-form，el-table 等组件，适用于快速开发后台管理项目。

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 'base-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

todo

• 结构优化.精简冗余配置以及依赖

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

ElsaTable.columns

更多详见：el-table column

ElsaTable.elProps

更多详见：el-table attributes

ElsaTable Events

更多详见：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

ElsaForm.config

更多详见：el-form-item methods

ElsaForm.field.elAttrs

示例一些特殊属性

ElsaForm.layout

ElsaForm.elProps

更多详见：el-form attributes

ElsaForm Methods

更多详见：el-form methods