ele-plus(二)-----elp-table组件、elp-controller-table组件、elp-filter-operator组件

时间  2019-11-07
标签 ele elp table 组件 controller filter operator 繁體版
原文   原文链接

使用以前先介绍一下静态变量ConstantsParamjavascript

静态变量ConstantsParam

  • 一、引入 import { ConstantParams } from 'ele-plus'
  • 二、变量内容
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组件

一、引入

import {ElpTable} from 'ele-plus'
复制代码

二、局部注册

components: {
    ElpTable
  }
复制代码

三、全局注册

Vue.use(ElpTable)
复制代码

四、属性

参数 说明 类型 是否必填 默认值
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

五、事件

事件名 说明 参数
handleClick 若rowClick设置为true,则触发，或rowClick设置为false,tableColumns中设置handleClick事件触发 row
tableColumns设置的回调函数名 tableColumns设置的回调函数名 row
handleSelectionChange 多选框触发选择 多选框选中列表

六、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 },
 { label: '名称', name: 'title', fixed: 'left', minWidth: 155 },
 { 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'
   },
   { label: '查看',
     entity: ConstantParams.TABLECOLUMNSTYPE.BUTTON,
     callBackFunName: 'show4'
   }
   ],
   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回调函数
  • 一、参数：第一个参数为name对应的值，第二个参数为row
  • 二、普通数据
function formater(v){
    return v+'test'//或 return {value:v+'test'}
}
复制代码
  • 三、联合其余字段修改
function formaterNewname(v,row){
    return v + row.name//或 return {value:v + row.name}
}
复制代码
  • 四、带有icon的数据内容
function formaterIconV(v){
 return {value:v,icon:'edit'}//icon为icon的name
}
复制代码
图标
  • 一、valueType: ConstantsParam.TABLECOLUMNSTYPE.IMAGE.key（不可变）
  • 二、label: ConstantsParam.TABLECOLUMNSTYPE.IMAGE.label（列标题可修改）
  • 三、value:数组（能够设置多个图片），数据结构
列名 说明
src 图片地址
callBackFunName 回调函数名称（会抛出该事件）
alt 图片说明
style 图片样式（可修改）默认是：'width:30px;height:30px'
按钮
  • 一、valueType: ConstantsParam.TABLECOLUMNSTYPE.BUTTON.key（不可变）
  • 二、label: ConstantsParam.TABLECOLUMNSTYPE.BUTTON.label（列标题可修改）
  • 三、value:数组（能够设置多个按钮），数据结构
列名 说明
label 名称
entity 按钮样式默认ConstantsParam.TABLECOLUMNSTYPE.BUTTON
callBackFunName 回调函数名称（会抛出该事件）
  • 四、ConstantsParam.TABLECOLUMNSTYPE.BUTTON
列名 说明 默认值 可选项
key 不可修改 'button'
label 可修改、显示名称 '操做'
type 可修改对应el-button中的type 'primary'
styleType 可修改 'plain' plain/round/disabled
icon 可修改 对应elementUI中的icon名称

elp-filter-operator组件

一、引入

import {ElpFilterOperator} from 'ele-plus'
复制代码

二、局部注册

components: {
    ElpFilterOperator
  }
复制代码

三、全局注册

Vue.use(ElpFilterOperator)
复制代码

四、属性

参数 说明 类型 是否必填 默认值
items 内容 Array true
rules 表单验证规则 Object false -
clearable 是否可清除 Boolean false false
inline 行内表单模式 Boolean false true
label-position 表单域标签的位置(right/left/top) String false right
label-width 表单域标签的宽度，做为 Form 直接子元素的 form-item 会继承该值 String false ''
label-suffix 表单域标签的后缀 String false ''
show-message 是否显示校验错误信息 Boolean false true
inline-message 是否以行内形式展现校验信息 Boolean false false
status-icon 是否在输入框中显示校验结果反馈图标 Boolean false false
size 用于控制该表单内组件的尺寸(medium / small / mini) String false ''

五、事件

事件名 说明 参数
query 点击回调和查询触发事件(已增长防抖) 查询条件已对象形式返回如：{name:'logmei',sex:'0'}
onResetAndQuery 重置并查询（清空选项内容）
onReset 重置（清空选项内容）

六、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: ({ maxDate, minDate }) => {
        // console.log('onPick',maxDate,minDate)
        Vue.implementationselectDate = minDate
      },
      disabledDate: (time) => {//不可用范围
        const curr = Vue.implementationselectDate || new Date()
        const currentTime = new Date(curr)
        const thirtyOne = 30 * 24 * 60 * 60 * 1000
        const start = currentTime - thirtyOne
        const end = start + 60 * 24 * 60 * 60 * 1000
        return time.getTime() > end || time.getTime() < start
      },
      resetDisableDate: () => {//重置不可用范围
        Vue.implementationselectDate = undefined
      }
    }
  },
  {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}
],
复制代码

七、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来设置是否本身作具体的内容显示。（详细使用说明请往下看）html

一、引入

import {ElpControllerTable} from 'ele-plus'
复制代码

二、局部注册

components: {
    ElpControllerTable
  }
复制代码

三、全局注册

Vue.use(ElpControllerTable)
复制代码

四、属性

参数 说明 类型 是否必填 默认值
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]

五、事件

事件名 说明 参数
handleClick 若rowClick设置为true,则触发，或rowClick设置为false,tableColumns中设置handleClick事件触发 row
handleSelectionChange 多选框触发选择 多选框选中列表
dialogOpened 弹出框弹出事件
dialogClosed 弹出框弹出事件
dialogDrag 弹出框弹出事件
dialogClose 弹出框弹出事件

六、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>
复制代码

七、示例

  • 一、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>
复制代码
  • 二、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
复制代码
  • 三、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
          }
        }
      )
    })
}
复制代码

七、在线演示

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程