代码仓库

最新版本 v1.0.0

安装

npm install ele-plus -S

引入ElePlus

完整引入

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)

组件使用说明

弹出框：elp-dialog

增加了滑出效果

使用与el-dialog的使用方法一致，只是增加了滑出效果的属性slideOutType

• 默认显示方式，居中显示：center
• 从顶部滑出，居中显示：top
• 从底部滑出，居中显示：bottom
• 从右侧滑出，居中显示：right
• 从左侧滑出，居中显示：left
• 从右侧滑出，贴近边缘：rightSide
• 从左侧滑出，贴近边缘：leftSide
• 从顶部滑出，贴近边缘：topSide

示例

    <el-button @click="visible=true">点击显示弹出框</el-button>
    <elp-dialog :visible.sync="visible" title="标题" slideOutType="rightSide">弹出框内容</elp-dialog>

搜索框

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

示例

 <elp-search v-model="value"></elp-search>

按键获取焦点指令

• 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的数组）

用于指定固定元素获取焦点

• 字符串：

    //form中也可使用
  <el-form v-shortCut:keydown.keyDown.self="'aa'">
  <el-input id='aa'><el-input>
  <el-form>

• 数组：

 <el-form v-shortCut:keydown.keyDown.self="['aa','bb','cc','dd']">
...
  <el-input id='aa'><el-input>
  <el-input id='bb'><el-input>
  <el-input id='cc'><el-input>
  <el-input id='dd'><el-input>
...
<el-form>

2、其他修饰符(主要用于固定列，并需要使用上下键获取上下行的相同位置元素焦点)

• Number类型：值为一行的操作元素个数，用于上下键

 v-shortCut:keydown.keyDown="10"
 v-shortCut:keydown.arrow="10"

• 可变值：用于重置光标位置

   v-shortCut:keydown.keyDown="s"
   v-shortCut:keydown.arrow="s"
   v-shortCut:keydown.enter="s"

• Object：

//form中也可使用
<el-form v-shortCut:keydown.enter>...<el-form>
//可编辑表格中使用
<el-table  v-shortCut:keydown.keyDown="shortCutObj">....</el-table>
//定义变量
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'...]]

示例：

  <elp-image-of-self-dialog
          :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'
          ]}
    ]
  }
}
}     

• 带工具栏(放大、缩小、旋转、上下切换)的图片组件 ElpImagesDialog：

  引入方式：

   // 全局
    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'...]}]

示例：

  <elp-images-dialog
        :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'
          ]}
    ]
  }
}
}     

• 单个图片组件包 ElpImageDialog：

引入方式: js import {ElpImageDialog} from 'ele-plus' Vue.use(ElpImageDialog) 包含的组件：ElpImageOfSelfDialog、ElpImagesDialog

• 图片列表组件 ElpImageList：

引入方式：

  //全局
     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'}，提供图片列表中的小图片样式

示例：

<template>
<div>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="默认" name="first">
      <p>dialogType:'self' 默认值，带有遮罩层的图片切换</p>
      <elp-image-list :visible.sync="tabs[0].visible" :image-list="imgFiles"/>
    </el-tab-pane>
    <el-tab-pane label="图片切换无遮罩层" name="second">
      <p>:shadow="false" 无遮罩层的图片切换(默认值为true)</p>
      <elp-image-list :visible.sync="tabs[1].visible" :image-list="imgFiles" :shadow="false"/>
    </el-tab-pane>
    <el-tab-pane label="带有工具栏" name="third">
      <p>dialogType:'images' 带有工具栏（放大缩小旋转）</p>
      <elp-image-list :visible.sync="tabs[2].visible" :image-list="imgFiles" dialogType='images'/>
    </el-tab-pane>
    <el-tab-pane label="带有工具栏，不带遮罩" name="fourth">
      <p>dialogType:'images' 带有工具栏（放大缩小旋转）不带遮罩</p>
      <elp-image-list :visible.sync="tabs[3].visible" :image-list="imgFiles" dialogType='images'  :shadow="false"/>
    </el-tab-pane>
  </el-tabs>
</div>
</template>
<script>
export default {
data(){
  return {
    activeName: 'first',
    tabs:[
      {name:'first',visible:false},
      {name:'second',visible:false},
      {name:'third',visible:false},
      {name:'fourth',visible:false}
    ],
    imgFiles:[
      {
        title:'title-01',
        list:[
           {url:'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',
          describe:'2F06%2F16%2F20090616171420490.jpg'},
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566558427557&di=5781beb0f17d4f665d4cc20cb803775b&imgtype=0&src=http%3A%2F%2Fpic.k73.com%2Fup%2Fsoft%2F2016%2F0102%2F092635_44907394.jpg',
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566558427557&di=c9d6906dfc54e9a286c8cf3199072660&imgtype=0&src=http%3A%2F%2Fwww.sx198.com%2Fp%2F84%2Fimage%2F201611%2F1479608859183678447.gif'
          ]},
          {
        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://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566558427557&di=8486823d19d99ae586d582985de6fb65&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201305%2F25%2F20130525153450_nHVaH.thumb.700_0.jpeg'
          ]}
    ]
  }
}
}
</script>     

• 支持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（向上滚动） 示例:

   <div 
    v-mouseScroll 
    @downWheel="downWheel" 
    @upWheel="upWheel"  
    >
    内容
    </div>

使用之前先介绍一下静态变量ConstantsParam

静态变量ConstantsParam

• 1、引入 import { ConstantParams } from 'ele-plus'
• 2、变量内容

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文件模板

/** 模板
*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、普通数据

function formater(v){
    return v+'test'//或 return {value:v+'test'}
}

• 3、联合其他字段修改

function formaterNewname(v,row){
    return v + row.name//或 return {value:v + row.name}
}

• 4、带有icon的数据内容

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名称

使用示例

基础用法

<elp-table 
    :loading="listLoading" 
    :table-data="dataTable" 
    :table-columns="dataColumns" 
    :border="true"
    :fit="true"
    @handleClick="handleClick"
    />
   

export default{
  data(){
    return {
      listLoading: false,
      dataTable:[],
      dataColumns:addressListColumns,
    }
  },
   methods:{
    handleClick(row){
      console.log('选中这行的数据',row)
    }
  }
}

增加展开效果

 <elp-table
  :table-data="tableData" 
  :table-columns="tableColumns" 
  :authority="true" 
  :columnExpand="true">
  <template v-slot:expand="row">
    {{row}}
  </template>
  </elp-table>
   

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

elp-filter-operator组件

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示例

 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 = 31*24*60*60*1000
            const start = currentTime-thirtyOne
            const end = start+62*24*60*60*1000
            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 | 可以添加新的按钮 | 查询参数值

• 查询参数值结构示例

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},
  ]

• 使用示例

 <template v-slot:buttons="formItems">
   <el-button type="primary" @click="query(formItems)">查询</el-button>
 </template>
 <template v-slot:otherButtons="formItems">
    <el-button type="primary" @click="exportFile(formItems)">导出</el-button>
 </template>

elp-controller-table组件

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

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 | 可以添加新的按钮 | 查询参数值

• 查询参数值结构示例

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},
  ]

• 使用示例

   <template v-slot:filterButtons="formItems">
      <el-button type="primary" @click="query(formItems)">查询</el-button>
   </template>
   <template v-slot:filterOtherButtons="formItems">
       <el-button type="primary" @click="exportFile(formItems)">导出</el-button>
   </template>
  <!-- 使用默认弹出框
   <template v-slot:default="row">
     {{row}}
   </template> -->
  <!-- 自己编写弹出框 -->
   <template v-slot:detail="row">
     <elp-dialog
     :visible.sync="dialogVisible"
     >
      first--------- {{row}}
     </elp-dialog>
   </template>

7、示例

• 1、elp-controller-table使用示例

<template>
  <elp-controller-table
  dialog-title="内容"
  border
  :table-data-interface="tableDataInterface"
  :search-params="searchParams"
  :table-columns="contractColumns"
  :show-row-number="true"
  :prevText="'上一页'"
  :nextText="'下一页'"
  :dialogDefault="false"
  @handleClick="dialogVisible=true"
  >
  <!-- 使用默认弹出框
    <template v-slot:default="row">
    {{row}}
  </template> -->
  <!-- 自己编写弹出框 -->
  <template v-slot:detail="row">
    <elp-dialog
    :visible.sync="dialogVisible"
    >
    {{row}}
    </elp-dialog>
  </template>
  </elp-controller-table>
</template>
<script>
import TableList from './interface.js'//接口
import contractColumns from './tableColumns.js'//table列说明
// import {ElpControllerTable} from 'ele-plus' //单独引用
export default {
  // components:{
  //   ElpControllerTable
  // },
  data(){
    return {
      dialogVisible:false,
      tableDataInterface:TableList,//接口
      contractColumns:contractColumns,//列说明
      //查询条件form中的内容说明
      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:'daterange',type:'DATEPICKERRANGE',label:'选择日期范围',value:['2019-09-01','2019-09-06'],format:'yyyy-MM-dd'},
          {name:'date',type:'DATEPICKER',label:'选择日期',value:'2019-09-01',format:'yyyy-MM-dd',valueFormat:'yyyy-MM-dd'},
          {name:'guid',type:'HIDDEN',label:'',value:'1'}
      ],
    }
  },
  methods:{
    // tableDataInterface:(params)=>{
    //   return TableList
    // }
  }
}
</script>

• 2、tableColumns.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示例

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、在线演示