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
          }
        }
      )
    })
}
複製代碼

七、在線演示

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。