element-easy
Version:
crud for element ui
408 lines (370 loc) • 15.5 kB
Markdown
# element-easy
## 安装
```
npm install element-easy
```
## 使用
依赖：
- vue >= 2.4.0
- element-ui
```js
// main.js
import ElementEasy from 'element-easy'
import 'element-easy/lib/element-easy.css'
Vue.use(ElementEasy)
```
```html
<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>
```
```js
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 函数 |
```javascript
// api function 示例
{
api: function(params) {
console.log(params)
return new Promise((resolve, reject) => {
// todo
})
}
}
```
##### action.details 和 action.list 参数
支持 Form 表单控件的所有参数外，增加如下
| 参数名 | 参数值类型 | 默认值 | 说明 |
| ------ | ---------- | ------ | ----------------------------------------- |
| api | Function | | 会接受到提交的信息；需要返回 Promise 函数 |
```javascript
// 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 |