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 |