element-easy
v0.7.6
Published
crud for element ui
Downloads
1
Readme
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 |