使用以前先介紹一下靜態變量ConstantsParamjavascript
靜態變量ConstantsParam
- 一、引入 import { ConstantParams } from 'ele-plus'
- 二、變量內容
const constantParams = {
name:'ConstantsParam',
TABLECOLUMNSTYPE : {
IMAGE: {
key: 'img',
label: '圖標',
style: 'width:30px;height:30px'
},
BUTTON: {
key: 'button',
label: '操做',
type: 'primary',
styleType: 'plain'
},
DATA: {
key: 'data'
}
},
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文件模板
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)
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'
}
複製代碼
function formaterNewname(v,row){
return v + row.name
}
複製代碼
function formaterIconV(v){
return {value:v,icon:'edit'}
}
複製代碼
圖標
- 一、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爲下個聯動下來框賦值 |
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 }) => {
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: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: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' export default { data(){ return { dialogVisible:false, tableDataInterface:TableList, contractColumns:contractColumns, 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:{ } } </script>
複製代碼
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)
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
複製代碼
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
}
}
)
})
}
複製代碼