ele-plus(二)-----elp-table組件、elp-controller-table組件、elp-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
          }
        }
      )
    })
}
複製代碼

七、在線演示

相關文章
相關標籤/搜索