element-easy v0.7.6

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 所有事件外，还支持以下：

一级参数

thead 参数

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

actions 参数

outerStyles 和 innerStyles

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

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

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

action.details 和 action.list 参数

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

// 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 所有参数，部分默认值调整如下