elsa-vue

    1.1.1 • Public • Published

    elsa

    elsa(eleme simple admin)基于 element-ui 封装 el-form,el-table 等组件,适用于快速开发后台管理项目。

    用法示例,见:🚀 Document 和 Demo

    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

    Install

    npm i elsa-vue

    DownloadsWeekly Downloads

    0

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    731 kB

    Total Files

    60

    Last publish

    Collaborators

    • eminoda