ele-plus

$3

最新版本 v1.0.0

安装

``
npm install ele-plus -S
`

$3

#### 完整引入
`
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
import ElePlus from 'ele-plus'
import 'ele-plus/lib/ele-plus.css'
Vue.use(ElePlus)
Vue.use(ElementUI)

new Vue({
el: '#app',
render: h => h(App)
})
`

#### 按需引入
`
import {
ElpDialog,
ElpSearch,
ElpSvgIcon,
ElpButton,
ElpImageDialog,
ElpImageList,
ElpImageOfSelfDialog,
ElpImagePage,
ElpImagesDialog,
ShortCut,
DragImage,
MouseScroll,
ElpCarousel,
ElpControllerTable,
ElpFilterOperator,
ElpPagination,
ElpTable,
ConstantParams
} from 'ele-plus'

Vue.use(ElpDialog)
Vue.use(ElpSearch)
Vue.use(ElpSvgIcon)
Vue.use(ElpButton)
Vue.use(ElpImageDialog)
Vue.use(ElpImageOfSelfDialog)
Vue.use(ElpImagesDialog)
Vue.use(ElpImageList)
Vue.use(ElpImageOfSelfDialog)
Vue.use(ElpImagePage)
Vue.use(ElpImagesDialog)
Vue.use(ShortCut)
Vue.use(DragImage)
Vue.use(MouseScroll)
Vue.use(ElpControllerTable)
Vue.use(ElpFilterOperator)
Vue.use(ElpPagination)
Vue.use(ElpTable)
Vue.use(ConstantParams)
`


组件使用说明

$3

> 增加了滑出效果
#### 使用与el-dialog的使用方法一致，只是增加了滑出效果的属性slideOutType
* 默认显示方式，居中显示：center
* 从顶部滑出，居中显示：top
* 从底部滑出，居中显示：bottom
* 从右侧滑出，居中显示：right
* 从左侧滑出，居中显示：left
* 从右侧滑出，贴近边缘：rightSide
* 从左侧滑出，贴近边缘：leftSide
* 从顶部滑出，贴近边缘：topSide
#### 示例
`js
点击显示弹出框
弹出框内容
`

$3

> 该组件包括：输入框和搜索按钮；支持回车键删除完内容之后查询、存在内容回车查询、点击搜索按钮进行查询，增加防抖
#### 示例
`js

`

$3

* 1、引入指令
`
import {ShortCut} from 'ele-plus'
`

* 2、局部注册
`
directives: {
ShortCut
}
`
* 3、全局注册
`
Vue.use(ShortCut)
`
* 4、指令`v-shortCut`
> 绑定到父元素即可
> * 指令名：keydown
> * 修饰符：keyDown（回车和上下左右键）、arrow（上下左右键）、enter（回车键）、self（指定元素）
#### 接收值说明
##### 1、self（value接收值为id的值或id的数组）
> 用于指定固定元素获取焦点
>* 字符串：
`js
//form中也可使用



`

>* 数组：
`js

...




...

`
##### 2、其他修饰符(主要用于固定列，并需要使用上下键获取上下行的相同位置元素焦点)
>* Number类型：值为一行的操作元素个数，用于上下键
`js
v-shortCut:keydown.keyDown="10"
v-shortCut:keydown.arrow="10"
`
>* 可变值：用于重置光标位置
`js
v-shortCut:keydown.keyDown="s"
v-shortCut:keydown.arrow="s"
v-shortCut:keydown.enter="s"
`
>* Object：

`js
//form中也可使用
...
//可编辑表格中使用
....
//定义变量
data(){
return {
shortCutObj: {
rowCount: 11,//值为一行的操作元素个数，用于上下键
callBack: () => {//获取最后一个元素触发的回调函数
return this.addRow()
},
parenClassName: 'el-table__body-wrapper', //父元素class下的所有操作元素
ignore:['elpignore']//可以忽略元素： disabled、select、radio、checkbox、date、multi_select,elpignore (默认忽略：'radio', 'checkbox', 'disabled')
},
}
}
`
### 防抖按钮：elp-button
> 使用与el-button的使用方法一致,只是增加了防抖
### 图片组件
* #### 不带工具栏，支持上下切换的图片组件 ElpImageOfSelfDialog：
> 引入方式：
`
// 全局
import {ElpImageOfSelfDialog} from 'ele-plus'
Vue.use(ElpImageOfSelfDialog)
//局部
import {ElpImageOfSelfDialog} from 'ele-plus'
export default {
components: {
ElpImageOfSelfDialog
}
}
`
> ##### 接收的属性如下：
> * 1、visible：[Boolean]，默认值false。是否显示 ` visible.sync="dialogVisible"`
> * 2、imageUrl：[String],必填项，
> * 3、shadowType：[Boolean],默认值true（显示遮罩层）。是否显示遮罩层
> * 4、imageStyle：[Object],默认值{height: '800px'}
> * 5、imageList：[Array],必填项，结构可为['imgurl1','imgurl2'...]，也可为[{title:'title1',list:['imgurl1','imgurl2'...]]

> ##### 示例：
`js
:visible.sync="dialogVisible"
:image-list="imageList"
:shadow-type="shadow"
append-to-body
:image-url="src"
/>
export default {
data(){
return {
dialogVisible: false,
shadow: true,
src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566558427557&di=01d80d552ef025f54a6a2dff52432a98&imgtype=0&src=http%3A%2F%2Fi1.17173.itc.cn%2F2009%2Fkx%2F2009%2F06%2F16%2F20090616171420490.jpg',
imageList:[
{
title:'title-01',
list:[
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566558427557&di=01d80d552ef025f54a6a2dff52432a98&imgtype=0&src=http%3A%2F%2Fi1.17173.itc.cn%2F2009%2Fkx%2F2009%2F06%2F16%2F20090616171420490.jpg'
]},
{
title:'title-02',
list:[
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566558427557&di=2adb4cf9945d0ba46adca46f00b99644&imgtype=0&src=http%3A%2F%2Fimage.finance.china.cn%2Fupload%2Fimages%2F2014%2F0410%2F085000%2F0_2323627_580fd395d60d023a4cf8b45c31cd1218.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566558427557&di=4b8f8e2c2686d41a9e2ffcadce1c7721&imgtype=0&src=http%3A%2F%2Fimg3.ph.126.net%2F1KDLXCf_5HxC0KDAxUQZSg%3D%3D%2F2866541162838628463.jpg'
]}
]
}
}
}
`

![](https://user-gold-cdn.xitu.io/2019/8/26/16cccde6f0a078cc?w=956&h=637&f=png&s=734928)
* #### 带工具栏(放大、缩小、旋转、上下切换)的图片组件 ElpImagesDialog：
> 引入方式：
`js
// 全局
import {ElpImagesDialog} from 'ele-plus'
Vue.use(ElpImagesDialog)
//局部
import {ElpImagesDialog} from 'ele-plus'
export default {
components: {
ElpImagesDialog
}
}
`
> ##### 接收的属性如下：
> * 1、visible：[Boolean]，默认值false。是否显示 ` visible.sync="dialogVisible"`
> * 2、imageUrl：[String],必填项，
> * 3、shadowType：[Boolean],默认值true（显示遮罩层）。是否显示遮罩层
> * 4、imageStyle：[Object],默认值{height: '800px'}
> * 5、imageList：[Array],必填项，结构可为['imgurl1','imgurl2'...]，也可为[{title:'title1',list:['imgurl1','imgurl2'...]}]
> ##### 示例：
`js
:visible.sync="dialogVisible"
:image-list="imageList"
:shadow-type="shadow"
append-to-body
:image-url="src"
/>
export default {
data(){
return {
dialogVisible: false,
shadow: true,
src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566558427557&di=01d80d552ef025f54a6a2dff52432a98&imgtype=0&src=http%3A%2F%2Fi1.17173.itc.cn%2F2009%2Fkx%2F2009%2F06%2F16%2F20090616171420490.jpg',
imageList:[
{
title:'title-01',
list:[
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566558427557&di=01d80d552ef025f54a6a2dff52432a98&imgtype=0&src=http%3A%2F%2Fi1.17173.itc.cn%2F2009%2Fkx%2F2009%2F06%2F16%2F20090616171420490.jpg'
]},
{
title:'title-02',
list:[
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566558427557&di=2adb4cf9945d0ba46adca46f00b99644&imgtype=0&src=http%3A%2F%2Fimage.finance.china.cn%2Fupload%2Fimages%2F2014%2F0410%2F085000%2F0_2323627_580fd395d60d023a4cf8b45c31cd1218.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566558427557&di=4b8f8e2c2686d41a9e2ffcadce1c7721&imgtype=0&src=http%3A%2F%2Fimg3.ph.126.net%2F1KDLXCf_5HxC0KDAxUQZSg%3D%3D%2F2866541162838628463.jpg'
]}
]
}
}
}
`
![](https://user-gold-cdn.xitu.io/2019/8/26/16cccf66a1b4dcff?w=1882&h=844&f=png&s=950502)
* #### 单个图片组件包 ElpImageDialog：
> 引入方式:
`js
import {ElpImageDialog} from 'ele-plus'
Vue.use(ElpImageDialog)
`
> 包含的组件：ElpImageOfSelfDialog、ElpImagesDialog

* #### 图片列表组件 ElpImageList：
> 引入方式：
`js
//全局
import {ElpImageList} from 'ele-plus'
Vue.use(ElpImageList)
//或局部
import {ElpImageList} from 'ele-plus'
export default {
components: {
ElpImageList
}
}
`
> ##### 接收的属性如下：
> * 1、visible：[Boolean]，必填项，默认false。提供关闭子窗口的开关 ` visible.sync="dialogVisible"`
> * 2、dialogType：[String],默认值'self'。self:不带工具栏，images:带工具栏
> * 3、shadow：[Boolean],默认值true（显示遮罩层）。是否显示遮罩层
> * 4、imageStyle：[Object],默认值{height: '800px'}
> * 5、imageList：[Array],必填项，结构可为[{title:'title1',list:['imgurl1','imgurl2'...]}]，新增加说明字段describe,结构如[{title:'title1',list:[{url:'imgurl1',describe:'imgurl1-describe'},'imgurl2'...]]
> * 6、imgsStyle：[Object],默认值{width:'250px',height:'170px'}，提供图片列表中的小图片样式
> ##### 示例：
`js


`
![](https://user-gold-cdn.xitu.io/2019/8/26/16cccfdb46a03f18?w=1905&h=750&f=png&s=532298)
* #### 支持mouseover时滚轮滚动时图片放大缩小，mouseout时取消事件
在线运行:https://codepen.io/logmei/pen/YzKZaRm

### 鼠标滚轮指令
* 1、引入指令
`
import {MouseScroll} from 'ele-plus'
`

* 2、局部注册
`
directives: {
MouseScroll
}
`
* 3、全局注册
`
Vue.use(MouseScroll)
`
* 4、指令`v-mouseScroll`
> 绑定事件：downWheel（向下滚动），upWheel（向上滚动）
> 示例:
`


`
> 使用之前先介绍一下静态变量ConstantsParam
### 静态变量ConstantsParam
* 1、引入 import { ConstantParams } from 'ele-plus'
* 2、变量内容
`js
const constantParams = {
name:'ConstantsParam',
//tableColumns的数据类型
TABLECOLUMNSTYPE : {
IMAGE: {
key: 'img',
label: '图标',
style: 'width:30px;height:30px'
},
BUTTON: {
key: 'button',
label: '操作',
type: 'primary',
styleType: 'plain'
},
DATA: {
key: 'data'
}
},
//filterOperator组件需要的items数据类型
FILTERTYPE : {
INPUT: {
key: 'input',
description: '输入框'
},
SELECT: {
key: 'select',
description: '选择框'
},
DATEPICKERRANGE: {
key: 'datepickerrange',
description: '日期范围',
format: 'yyyy-MM-dd'
},
DATEPICKER: {
key: 'datepicker',
description: '日期',
format: 'yyyy-MM-dd'
},
HIDDEN: {
key: 'hidden',
description: '隐藏输入框'
}
}
}
`
### elp-table组件


#### 1、引入指令
`
import {ElpTable} from 'ele-plus'
`

#### 2、局部注册
`
components: {
ElpTable
}
`
#### 3、全局注册
`
Vue.use(ElpTable)
`
#### 4、属性
| 参数 | 说明 | 类型 | 是否必填| 默认值|
|------|------------|------------|----------|----|
| tableData | 显示的数据 | Array | true | |
| tableColumns | 表头和数据类型等 | Array| true | |
| showRowNumber | 显示序号 | Boolean | false | false|
| border | 竖线 | Boolean | false | false|
| loading | 是否显示加载中 | Boolean | false | false|
| rowClick | 是否触发行点击事件 | Boolean | false | false|
| authority | 是否有多选操作权限 | Boolean | false | false|
| clearSelectStatus | 清空多选框(监控该值发生改变会触发) |Number | false | 0
| fit | 列的宽度是否自撑开 | Boolean | false | true|
| columnExpand| 列展开属性 | Boolean | false | false |
#### 5、事件
| 事件名 | 说明 | 参数 |
|------|------------|------------|
| handleClick | 若rowClick设置为true,则触发，或rowClick设置为false,tableColumns中设置handleClick事件触发 | row |
| tableColumns设置的回调函数名 | tableColumns设置的回调函数名 | row |
| handleSelectionChange | 多选框触发选择 | 多选框选中列表 |

#### 6、tableColumns说明
##### js文件模板
`js
/** 模板
*authority:权限（默认为true）
valueType:列中数据类型（默认data）TABLECOLUMNSTYPE中的类型
label:列头名
name：普通数据对应tableData中的字段
formater：回调函数
value:操作列
*/
import { ConstantParams } from 'ele-plus'
const contractColumns = [
{
authority: true,
valueType: ConstantParams.TABLECOLUMNSTYPE.IMAGE.key,
label: ConstantParams.TABLECOLUMNSTYPE.IMAGE.label,
name: '',
value: [{
src: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3300305952,1328708913&fm=27&gp=0.jpg',
callBackFunName: 'show1',
alt: '图片1',
style: ConstantParams.TABLECOLUMNSTYPE.IMAGE.style
},
{
src: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3300305952,1328708913&fm=27&gp=0.jpg',
callBackFunName: 'show2',
alt: '图片2',
style: ConstantParams.TABLECOLUMNSTYPE.IMAGE.style
}],
fixed: 'left',
width: 50
},
{ label: '编号', name: 'number', fixed: 'left',formater:formaterIconV },
{
authority: true,
valueType: ConstantParams.TABLECOLUMNSTYPE.BUTTON.key,
label: '名称',
name: '',
value: [{
label: '查看',
autoLabel:(row)=>row.title,//动态返回label值，存在autoLabel后，label将不起作用
entity: Object.assign({},ConstantParams.TABLECOLUMNSTYPE.BUTTON,{type:'text'}),//添加按钮样式
callBackFunName: 'showOrderDetail',//点击返回的回调函数
}
]
},
{ label: '使用名', name: 'name', fixed: 'left' },
{ label: 'ID', name: 'mechNo' },
{ label: '账号', name: 'account' },
{ label: '省份', name: 'province' },
{ label: '类型', name: 'signTypeVal' },
{ label: '金额', name: 'amount' },
{ label: '对应名', name: 'opptyName', minWidth: 155 },
{ label: '开始日期', name: 'startTime', formater, width: 140 },
{ label: '结束日期', name: 'endTime', formater, width: 140 },
{ label: '当前阶段', name: 'stateVal' },
{ label: '创建人', name: 'creator' },
{ label: '创建时间', name: 'createTime', formater, width: 140 },
{ label: '驳回原因', name: 'rejectReason' },
{
authority: true,
valueType: ConstantParams.TABLECOLUMNSTYPE.BUTTON.key,
label: ConstantParams.TABLECOLUMNSTYPE.BUTTON.label,
name: '',
value: [{
label: '编辑',
entity: ConstantParams.TABLECOLUMNSTYPE.BUTTON,
callBackFunName: 'show3',
showFun:(row)=>row.state === 1 //根据row中的state值动态判断按钮是否显示
},
{ label: '查看',
entity: ConstantParams.TABLECOLUMNSTYPE.BUTTON,
callBackFunName: 'show4',
showFun:(row)=>row.state === 2 //根据row中的state值动态判断按钮是否显示
}
],
fixed: 'right',
width: 50
},
{
authority: true,
valueType: ConstantParams.TABLECOLUMNSTYPE.BUTTON.key,
label: ConstantParams.TABLECOLUMNSTYPE.BUTTON.label,
name: '',
value: [{
label: '查看',
entity: ConstantParams.TABLECOLUMNSTYPE.BUTTON,
callBackFunName: 'handleClick'
}
],
fixed: 'right',
width: 100
}
]
// 年月日时分
function formater(v) {
const cFormat = '{y}-{m}-{d} {h}:{i}'
const val = v === null || v === 'null' ? '------' : parseTimeMilliSecond(v, cFormat)
// console.log('formater', val)
return val
}
// 年月日
function formaterByDay(v) {
const cFormat = '{y}-{m}-{d}'
return v === null || v === 'null' ? '------' : parseTimeMilliSecond(v, cFormat)
}

function formaterIconV(v){
return {value:v,icon:'edit'}
}
`
##### 结构说明：

| 参数 | 说明 | 类型 | 是否必填 |
|-------|----------|-------|------|----|
|valueType| ConstantsParam.TABLECOLUMNSTYPE的数据key值| String | false(不添加默认为data)
|authority|是否有权限查看|Boolean|false(不添加默认有权限)
|label|列标题名称| String | true |
|name |字段名|String|false(按钮或图标内容不需要)
|width|列宽|Number|false(默认为50)
|minWidth|最小列宽（若超过了宽度显示'...',并有Popover提示全部内容）|Number|false
|fixed|固定列|'left'或'right'|
|formater|转换数据的回调函数|Function|false|

##### formater回调函数
* 1、参数：第一个参数为name对应的值，第二个参数为row
* 2、普通数据
`js
function formater(v){
return v+'test'//或 return {value:v+'test'}
}
`
* 3、联合其他字段修改
`js
function formaterNewname(v,row){
return v + row.name//或 return {value:v + row.name}
}
`
* 4、带有icon的数据内容
`js
function formaterIconV(v){
return {value:v,icon:'edit'}//icon为icon的name
}
`
##### 图标
* 1、valueType: ConstantsParam.TABLECOLUMNSTYPE.IMAGE.key（不可变）
* 2、label: ConstantsParam.TABLECOLUMNSTYPE.IMAGE.label（列标题可修改）
* 3、value:数组（可以设置多个图片），数据结构

| 列名 | 说明 |
|--------|----------|
|src |图片地址|
|callBackFunName|回调函数名称（会抛出该事件）|
|alt|图片说明|
|style|图片样式（可修改）默认是：'width:30px;height:30px'
##### 按钮
* 1、valueType: ConstantsParam.TABLECOLUMNSTYPE.BUTTON.key（不可变）
* 2、label: ConstantsParam.TABLECOLUMNSTYPE.BUTTON.label（列标题可修改）
* 3、value:数组（可以设置多个按钮），数据结构

| 列名 | 说明 |
|--------|----------|
|label |名称|
|entity|按钮样式默认ConstantsParam.TABLECOLUMNSTYPE.BUTTON|
|callBackFunName|回调函数名称（会抛出该事件）|
* 4、ConstantsParam.TABLECOLUMNSTYPE.BUTTON

| 列名 | 说明 | 默认值|可选项|
|--------|----------|-------|-----|
|key | 不可修改 |'button'
|label|可修改、显示名称| '操作'
|type|可修改对应el-button中的type|'primary'
|styleType|可修改|'plain'|plain/round/disabled
|icon|可修改||对应elementUI中的icon名称

#### 使用示例
##### 基础用法
`html
:loading="listLoading"
:table-data="dataTable"
:table-columns="dataColumns"
:border="true"
:fit="true"
@handleClick="handleClick"
/>

`
`js
export default{
data(){
return {
listLoading: false,
dataTable:[],
dataColumns:addressListColumns,
}
},
methods:{
handleClick(row){
console.log('选中这行的数据',row)
}
}
}
`
##### 增加展开效果
`html
:table-data="tableData"
:table-columns="tableColumns"
:authority="true"
:columnExpand="true">



`
`js
export default{
data(){
return {
dataTable:[],
dataColumns:addressListColumns,
}
}
}
`

$3


#### 1、引入
`
import {ElpFilterOperator} from 'ele-plus'
`

#### 2、局部注册
`
components: {
ElpFilterOperator
}
`
#### 3、全局注册
`
Vue.use(ElpFilterOperator)
`
#### 4、属性
| 参数 | 说明 | 类型 | 是否必填| 默认值|
|------|------------|------------|----------|----|
| items | 内容 | Array | true | |

#### 5、事件
| 事件名 | 说明 | 参数 |
|------|------------|------------|
| query | 点击回调和查询触发事件(已增加防抖) | 查询条件已对象形式返回如：{name:'logmei',sex:'0'} |
| onResetAndQuery | 重置并查询（清空选项内容） | |
| onReset | 重置（清空选项内容） | |
#### 6、items的数据结构
| 字段名 | 类型 | 说明 |
|--------|----------|-------|
|name | String |字段名称(用于后端交互)
|type|ConstantParams.FILTERTYPE的key值| INPUT/SELECT/DATEPICKERRANGE/DATEPICKER/HIDDEN
|label| String |说明label
|value| String/Array | 默认值(type为datepickerrange时['2019-09-01','2019-09-06'])
|placeholder|String
|style|Object|样式
|className|String|类名
|list|Array|type为select时的列表[{key:'0',label:'女'},{key:'1',label:'男'}]
|format|String|日期控件格式转换
|valueFormat|String|设置返回值的格式
|clearable|Boolean|是否显示清除按钮
|pickerOptions|Object|日期控件配置的pickerOptions
|inchain|Object|联动下拉框例如：{Selectinchain:true,child:1,interface}其中Selectinchain代表需要触发change事件调用interface为下个联动下来框赋值
* items示例
`js
searchParams:[
{name:'name',type:'input',label:'姓名',value:'',placeholder:'姓名1',style:{width:'200px'}},
{name:'sex',type:'select',label:'性别',value:'0',list:[{key:'0',label:'女'},{key:'1',label:'男'}],className:'selectSex'},
{name:'province',type:'select',label:'省',value:'',inchain:{Selectinchain:true},list:[{key:'',label:'全部'},{key:'110000',label:'北京'},{key:'120000',label:'天津'}]},
{name:'city',type:'select',label:'市',value:'',inchain:{Selectinchain:true,child:1},interface:city,list:[{key:'',label:'全部'}]},
{name:'area',type:'select',label:'区',value:'',inchain:{child:2},interface:area,list:[{key:'',label:'全部'}]},
{name:'province1',type:'select',label:'省1',value:'',inchain:{Selectinchain:true},list:[{key:'',label:'全部'},{key:'110000',label:'北京'},{key:'120000',label:'天津'}]},
{name:'city1',type:'select',label:'市1',value:'',inchain:{Selectinchain:true,child:1},interface:city,list:[{key:'',label:'全部'}]},
{name:'area1',type:'select',label:'区1',value:'',inchain:{child:2},interface:area,list:[{key:'',label:'全部'}]},
{
name:'daterange'
,type:'datepickerrange'
,label:'选择日期范围'
,value:undefined
,format:'yyyy-MM-dd'
,clearable:false
, pickerOptions:{
onPick:({minDate})=>{
// console.log('onPick',maxDate,minDate)
this.selectDate = minDate
},
disabledDate:(time) => {
let currentTime = new Date(this.selectDate)
const thirtyOne = 312460601000
const start = currentTime-thirtyOne
const end = start+622460601000
return time.getTime() > end || time.getTime() < start
}
}
},
{name:'date'
,type:'datepicker'
,label:'选择日期'
,value:undefined
,format:'yyyy-MM-dd'
,valueFormat:'yyyy-MM-dd'
,clearable:false
, pickerOptions:{
disabledDate:(time) => {
return time.getTime() > Date.now()
}
}
},
{name:'guid',type:'hidden',label:'',value:count}
],
`
#### 7、slot
| name | 说明 | 参数 |
|----------|--------|---------|
| buttons | 按钮默认是重置和查询 | 查询参数值
| otherButtons | 可以添加新的按钮 | 查询参数值
* 查询参数值结构示例
`js
const formItems = [
{name: "name",value: "logmei"},
{name: "sex",value: "女"},
{name: "daterange",value: ["2019-09-01" , "2019-09-06"]},
{name: "date",value: "2019-09-01"},
{name: "guid",value: 0},
]
`
* 使用示例
`html


`




$3

> elp-filter-operator、elp-table、elp-pagination、elp-dialog组合组件,通过tableColumns和searchParams来显示查询条件和列表，以提供的tableDataInterface接口来查询条件，重置、查询、分页自动绑定查询接口，行操作默认支持弹出框显示详情，弹出框保留slot来渲染内容；也可以通过设置dialogDefault来设置是否自己做具体的内容显示。（详细使用说明请往下看）


![](https://user-gold-cdn.xitu.io/2019/9/11/16d1e1392ba54dd1?w=1405&h=495&f=png&s=84539)
#### 1、引入指令
`
import {ElpControllerTable} from 'ele-plus'
`

#### 2、局部注册
`
components: {
ElpControllerTable
}
`
#### 3、全局注册
`
Vue.use(ElpControllerTable)
`
#### 4、属性
| 参数 | 说明 | 类型 | 是否必填| 默认值|
|------|------------|------------|----------|----|
| tableDataInterface | 查询数据接口 | Function | true | |
| searchParams | elp-filter-operator组件的items | Array| true | |
| tableColumns | elp-table组件的tableColumns | Array | true | |
| fit | 列的宽度是否自撑开 | Boolean | false | true|
|showRowNumber| 是否显示序号 | Boolean | false | false
|border | 是否显示竖线 | Boolena | false | false
| dialogTitle | elp-dialog需要的title | String | false | '' |
| slideType | elp-dialog弹出效果 | String | false | 'center'|
| dialogDefault | 查看详情是否使用默认弹出框true(使用默认弹出框)、false(使用detail插槽) | Boolean | false | true|
| authority | elp-table使用的是否有多选操作权限 | Object | false | {operator:false}|
| reload | 是否重新加载数据 |Boolean | false | false
| prevText | 分页上一页显示的text | String | false |''
| nextText | 分页下一页显示的test | String | false | ''
| pageSizes | 每页显示个数选择器的选项设置 | Array | false | [5, 10, 20, 30, 50]

#### 5、事件
| 事件名 | 说明 | 参数 |
|------|------------|------------|
| handleClick | 若rowClick设置为true,则触发，或rowClick设置为false,tableColumns中设置handleClick事件触发 | row |
| handleSelectionChange | 多选框触发选择 | 多选框选中列表 |
| dialogOpened | 弹出框弹出事件
| dialogClosed | 弹出框弹出事件
| dialogDrag | 弹出框弹出事件
| dialogClose | 弹出框弹出事件
#### 6、slot
| name | 说明 | 参数 |
|----------|--------|---------|
| default | 默认弹出框内容 | row
| detail | 自定义内容 | row
| filterButtons | 按钮默认是重置和查询 | 查询参数值
| filterOtherButtons | 可以添加新的按钮 | 查询参数值
* 查询参数值结构示例
`js
const formItems = [
{name: "name",value: "logmei"},
{name: "sex",value: "女"},
{name: "daterange",value: ["2019-09-01" , "2019-09-06"]},
{name: "date",value: "2019-09-01"},
{name: "guid",value: 0},
]
`
* 使用示例
`html





`
#### 7、示例
* 1、elp-controller-table使用示例
`html


`
* 2、tableColumns.js示例
`js
import { parseTimeMilliSecond } from '@/utils/index.js' //日期格式化
import { ConstantParams } from 'ele-plus'
// 合同列表列
const contractColumns = [
{ label: '合同名称', name: 'title', fixed: 'left', minWidth: 155 ,formater: formaterIconV},
{ label: '客户名称', name: 'name', fixed: 'left' },
{ label: '机构ID', name: 'mechNo' },
{ label: '智慧脸账号', name: 'account' },
{ label: '省份', name: 'province' },
{ label: '签约类型', name: 'signTypeVal' },
{ label: '合同金额', name: 'amount' },
{ label: '对应商机', name: 'opptyName', minWidth: 155 },
{ label: '合同开始日期', name: 'startTime', formater: formaterByDay, width: 140 },
{ label: '合同截止日期', name: 'endTime', formater: formaterByDay, width: 140 },
{ label: '审批状态', name: 'approvalStateVal' },
{ label: '一级审批人', name: 'firApprPer', width: 100 },
{ label: '二级审批人', name: 'secApprPer', width: 100 },
{ label: '当前阶段', name: 'stateVal' },
{ label: '创建人', name: 'creator' },
{ label: '创建时间', name: 'createTime', formater, width: 140 },
{ label: '驳回原因', name: 'rejectReason' },
{
authority: true,
valueType: ConstantParams.TABLECOLUMNSTYPE.BUTTON.key,
label: ConstantParams.TABLECOLUMNSTYPE.BUTTON.label,
name: '',
value: [{
label: '查看',
entity: ConstantParams.TABLECOLUMNSTYPE.BUTTON,
callBackFunName: 'handleClick'
}
],
fixed: 'right',
width: 100
}
]
// 年月日时分
function formater(v) {
const cFormat = '{y}-{m}-{d} {h}:{i}'
const val = v === null || v === 'null' ? '------' : parseTimeMilliSecond(v, cFormat)
// console.log('formater', val)
return val
}
// 年月日
function formaterByDay(v) {
const cFormat = '{y}-{m}-{d}'
return v === null || v === 'null' ? '------' : parseTimeMilliSecond(v, cFormat)
}

function formaterIconV(v){
return {value:v,icon:'edit'}
}

export default contractColumns
`
* 3、interface.js示例
`js
export default function(params){
console.log('params',params)
return new Promise(resolve => {
resolve(
{
'code': 0,
'msg': 'success',
'result': {
'pageNum': 0,
'pageSize': 5,
'size': 2,
'startRow': 1,
'endRow': 1,
'total': 20,
'pages': 2,
'list': [
{
'guid': '122749434e7e414d87ebbe6e1fd4c62d',
'busGuid': '196749434e7e414d87ebbe6e1fd4c62d',
'apprProGuid': 'ef86b64853354551ae9a363e7723a8bd',
'number': '1000001',
'title': null,
'name': null,
'mechNo': null,
'account': null,
'province': '北京',
'signType': '1',
'signTypeVal': '软件收费版',
'amount': 1000,
'opptyName': '渐酒空金榼 花困蓬瀛',
'startTime': 1560156009000,
'endTime': 1560156013000,
'approvalState': 0,
'approvalStateVal': '待审批',
'firstLevelApprPer': null,
'secondLevelApprPer': null,
'state': 1,
'stateVal': '签约',
'creator': '于希德2',
'createTime': 1560156002000,
'rejectReason': null
},
{
'guid': '196749434e72344d87ebbe6e1fd4c62d',
'busGuid': '196749434e7e414d87ebbe6e1fd4c62d',
'apprProGuid': 'ef86b64853354551ae9a363e7723a8bd',
'number': '1000001',
'title': 'title',
'name': 'name',
'mechNo': 'mechNo',
'account': 'account',
'province': '北京',
'signType': '1',
'signTypeVal': '软件收费版',
'amount': 1000,
'opptyName': '渐酒空金榼 花困蓬瀛',
'startTime': 1560156009000,
'endTime': 1560156013000,
'approvalState': 0,
'approvalStateVal': '待审批',
'firstLevelApprPer': null,
'secondLevelApprPer': null,
'state': 1,
'stateVal': '签约',
'creator': '于希德2',
'createTime': 1560156002000,
'rejectReason': 'reason'
}
],
'prePage': 0,
'nextPage': 1,
'isFirstPage': false,
'isLastPage': false,
'hasPreviousPage': false,
'hasNextPage': true,
'navigatePages': 8,
'navigatepageNums': [
1
],
'navigateFirstPage': 1,
'navigateLastPage': 1,
'lastPage': 1,
'firstPage': 1
}
}
)
})
}
``

#### 7、在线演示