element-easy

安装

npm install element-easy

使用

依赖：

vue >= 2.4.0
element-ui

// main.js
import ElementEasy from 'element-easy'
import 'element-easy/lib/element-easy.css'

Vue.use(ElementEasy)

<template>
  <ez-crud
    :thead="crud.thead"
    :actions="crud.actions"
    :pagination="crud.pagination"
    :tools="crud.tools"
    v-bind="crud.options"
  >
    <template>
      <!-- 默认插槽，在表格后面新加列， 以下为示例 -->
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </template>
    >
    <template slot="prepend">
      <!-- 默认插槽，在表格前面新加列， 以下为示例 -->
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </template>

    <template slot="outerActions">
      <!-- 在表格左上的操作按钮后，新增其它按钮，以下为示例 -->
      <el-button type="text" size="small">导入</el-button>
    </template>

    <template slot="innerActions">
      <!-- 在表格内的操作按钮后，新增其它按钮，以下为示例 -->
      <el-button type="text" size="small">按钮</el-button>
    </template>
  </ez-crud>
</template>

export default {
  data() {
    return {
      crud: {
        options: {
          // el-table 参数
        },
        pagination: {
          // el-pagination 参数
          pageSizes: [5, 10, 20],
          pageSize: 5,
          currentPage: 1
        },
        actions: {
          // 各操作选项配置
          label: '操作',
          add: {
            // 新增
            show: true,
            api: (data) => {
              return new Promise((resolve, reject) => {})
            }
          },
          edit: {
            //编辑
            show: () => true,
            api: (data) => {
              return new Promise((resolve, reject) => {})
            }
          },
          delete: {
            // 删除
            show: false,
            showMultiple: () => true,
            api: (data) => {
              return new Promise((resolve, reject) => {})
            }
          },
          list: {
            // 列表
            api: ({ params, currentPage, pageSize }) => {
              return new Promise((resolve, reject) => {})
            }
          },
          details: {
            // 详情
            api: (data) => {
              return new Promise((resolve, reject) => {})
            }
          }
        },
        thead: [
          {
            prop: 'name',
            label: '姓名',
            width: 180,
            searchShow: true,
            form: {
                onChange: (val. form) => { // 新增编辑时，对应控件值改变时触发
                    // val: 值, form: 所有表单元素的值 
                }
            }
          },
          {
            prop: 'food',
            label: '食物',
            width: 200,
            form: {
              type: 'radio',
              options: [
                {
                  value: '黄金糕',
                  label: '黄金糕'
                },
                {
                  value: '双皮奶',
                  label: '双皮奶'
                },
                {
                  value: '蚵仔煎',
                  label: '蚵仔煎'
                },
                {
                  value: '龙须面',
                  label: '龙须面'
                },
                {
                  value: '北京烤鸭',
                  label: '北京烤鸭'
                }
              ]
            },
            searchShow: true,
            searchForm: {
              type: 'select',
              options: [
                {
                  value: '黄金糕',
                  label: '黄金糕'
                },
                {
                  value: '双皮奶',
                  label: '双皮奶'
                },
                {
                  value: '蚵仔煎',
                  label: '蚵仔煎'
                },
                {
                  value: '龙须面',
                  label: '龙须面'
                },
                {
                  value: '北京烤鸭',
                  label: '北京烤鸭'
                }
              ]
            }
          },
          {
            prop: 'address',
            label: '地址',
            form: {
              type: 'textarea'
            }
          },
          {
            prop: 'show',
            label: '状态',
            width: 100,
            form: {
              type: 'switch'
            },
            render: (h, scope) => {
              return <div>{scope.row.show}</div>
            }
          },
          {
            prop: 'date',
            label: '日期',
            width: 150,
            align: 'center',
            form: {
              type: 'date',
              valueFormat: 'yyyy-MM-dd'
            },
            searchShow: true,
            searchForm: {
              type: 'daterange'
            },
            formatter(scope) {
              return scope.row.date
            }
          }
        ]
      }
    }
  }
}

事件

除 el-table 所有事件外，还支持以下：

事件名	参数	说明
deleteSubmit	删除行的所有参数	提交删除数据
deleteSuccess		删除成功
deleteError		删除失败
addSubmit	新增表单的所有参数	提交新增数据
addClick		点击新增按钮
addSuccess		新增成功
addError		新增失败
editSubmit	编辑表单的所有参数	提交编辑数据
editSuccess		编辑成功
editError		编辑失败
closed		新增编辑弹框关闭

一级参数

参数名	参数值类型	默认值	说明
thead	Array		表头配置，对应 el-table 的 data 属性
actions	Object		crud 的一些行为配置
pagination	Object		el-pagination 配置
tools	Object	{ show: true, showControls: true, showRefresh: true }	控制表格右上的工具按钮的显示
showSelection	Boolean	false	是否显示多选框
showIndex	Boolean	false	是否显示序号
showMessage	Boolean	true	是否显示操作后的提示
fixedHeight	Boolean	true	是否固定表头
formSize	String	small	搜索栏的控件尺寸
height	Number, String		crud 组件高度
safeBottom	Number, String	20	距离页面底部的安全距离
beforeDelete	Promise Function	MessageBox.confirm	删除操作前的回调，默认提示是否确定删除

thead 参数

除 el-table 的 Table-column Attributes 外，还增加以下内容：

参数名	参数值类型	默认值	说明
show	Boolean	true	是否显示
type	String	input	表单控件类型
tooltip	String		表格提示信息
addShow	Boolean	true	新增时，是否显示
default	Any		表单默认值
editShow	Boolean	true	编辑时，是否显示
searhShow	Boolean	false	是否在搜索条件中显示
searchForm	Object	{ type: 'text'}	搜索栏 form 控件属性，可参阅 element ui 的 form 控件文档
form	Object	{ type: 'text' }	新增、编辑时的 form 控件属性，可参阅 element ui 的 form 控件文档
formRules	Array		新增、编辑时，表单验证规则，可参阅 element ui 的 form 控件文档

actions 参数

参数名	参数值类型	默认值	说明
show	Boolean	true	是否显示
align	String	center	对齐方式
width	Number, String	190	宽
fixed	String, Boolean		是否固定（true, left, right）
outerStyles	Object	{ showText: true, showIcon: true, circle: false, plain: true, size: 'small' }	表格外的，新增，删除按钮样式
innerStyles	Object	{ showText: true, showIcon: false, circle: false, plain: true, size: 'small' }	表格内的，编辑，删除按钮样式
add	Object	{ show: true,type: 'primary', icon: 'el-icon-plus', text: '新增' }
edit	Object	{ show: true,type: 'warning', icon: 'el-icon-edit', text: '编辑' }
delete	Object	{ show: true, showMultiple: true, type: 'danger', icon: 'el-icon-delete', text: '删除'}
details	Object	{}	定义 details.api 方法，获取列表数据
list	Object	{}	定义 list.api 方法，获取列表数据

outerStyles 和 innerStyles

支持 el-button 的所有参数外，增加如下

参数名	参数值类型	说明
showText	Boolean	是否显示文本
showIcon	Boolean	是否显示图标

action.add 和 action.edit 和 action.delete 参数

参数名	参数值类型	默认值	说明
show	Boolean	true	是否显示
showMultiple	Boolean	true	是否显示多选的删除
type	String		el-button 的 type
icon	String		el-button 的 icon
text	String		按钮文本
api	Function		会接受到提交的信息；需要返回 Promise 函数

// api function 示例
{
    api: function(params) {
        console.log(params)
        return new Promise((resolve, reject) => {
            // todo
        })
    }
}

action.details 和 action.list 参数

支持 Form 表单控件的所有参数外，增加如下

参数名	参数值类型	默认值	说明
api	Function		会接受到提交的信息；需要返回 Promise 函数

// details api function 示例
// 假如 details 接口如下
function getDetails(params) {
    return axios({
      method: 'get',
      url: '',
      params
    }
}

{
    api: function(params) {
        console.log(params)
        return new Promise((resolve, reject) => {
            // 根据需要，从 params 中取出查询参数，传入接口
            getDetails().then((res) => {
                // 假如 res 的值为如下
                res = {
                    code: 200,
                    data: { name: '', age: '' }
                }
                // 则需要 resolve 如下
                resolve(res.data)
            }).catch((err) => {
                reject(err)
            })
        })
    }
}

// list api function 示例
// 假如 list 接口如下
function getList(params) {
    return axios({
      method: 'get',
      url: '',
      params
    }
}

{
    api: function({ params, currentPage, pageSize }) {
        console.log(params, currentPage, pageSize )
        return new Promise((resolve, reject) => {
            // 接口有需要什么参数，可从 api 方法接收到的参数中获取
            getList().then((res) => {
                // 假如 res 的值为如下
                res = {
                    code: 200,
                    data: {
                        total: 100,
                        list: [ { name: '张三', age: '18' }, { name: '李四', age: '18' } ]
                    }
                }
                // 则需要 resolve 如下
                resolve({
                    list: res.data.list,
                    total: res.data.total
                })
            })
        })
    }
}

pagination 参数

支持 el-paginaton 所有参数，部分默认值调整如下

参数名	参数值	默认值
background	Boolean	true
layout	String	prev, pager, next, sizes

element-easy

element-easy

安装

使用

事件

一级参数

thead 参数

actions 参数

outerStyles 和 innerStyles

action.add 和 action.edit 和 action.delete 参数

action.details 和 action.list 参数

pagination 参数

Readme

Keywords

Package Sidebar

Install

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

element-easy

element-easy

安装

使用

事件

一级参数

thead 参数

actions 参数

outerStyles 和 innerStyles

action.add 和 action.edit 和 action.delete 参数

action.details 和 action.list 参数

pagination 参数

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads