iColumn.vue
3.34 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<template>
<el-table-column v-if="loadingShow" :label="col.label" :column-key="col.prop" :sortable="col.key?'custom':false" :prop="col.prop" align="left" :border="false" :min-width="col.prop=='defaultOrg1'?'200':width" :fixed="col.fixed" :type="col.type" :formatter="formatter">
<template #header="{column}">
<span :class="[col.prop]">
{{column.label}}
</span>
</template>
</el-table-column>
<el-table-column v-else :label="col.label" :column-key="col.prop" :sortable="col.key?'custom':false" :prop="col.prop" align="left" :border="false" :min-width="width" :fixed="col.fixed" :type="col.type" :formatter="formatter">
<template #header="{column}">
<span :class="[col.prop]">
{{column.label}}
</span>
</template>
</el-table-column>
</template>
<script>
const scaleVal = 0.5;
export default {
name: 'iColumn',
props: {
col: {
type: Object
},
loadingShow:{
type: Number
}
},
data(){
return {
width:'80'
}
},
methods:{
numFormat(val){
return val>10?val:("0"+val)
},
getTime(seconds){
if(isNaN(seconds))return seconds;
// return parseInt(seconds/3600)+this.$t('format.hoursUnit')+parseInt(seconds%3600/60)+'分'+(seconds%60)+'秒';
return this.numFormat(parseInt(seconds/3600))+':'+this.numFormat(parseInt(seconds%3600/60))+':'+this.numFormat(parseInt(seconds%60));
},
calW(value){
if(this.col.max){
let pval,max;
if(typeof value =='string'){
pval = parseFloat(value);
max = parseFloat(this.col.max)
}else{
pval = value;
max = this.col.max;
}
if(isNaN(pval)||isNaN(max))return 0;
let percent = pval*100/max ;
if(percent>100)return 0;
return percent*scaleVal+'%'
}
return 0
},
calS(value){
if(this.col.width){
this.width = this.col.width + 'px';
}
if(this.col.type=='string'){
return value
}
if(this.col.type=='integer'||this.col.type=='double'){
return this.toThousands(value)
}
if(this.col.type=='percent'){
return value+'%'
}
if(this.col.type=='time'){
return this.getTime(value)
}
if(this.col.type=='rank'){
this.width = '50px';
return value
}
},
formatter(row, column, value, index) {
if(this.loadingShow){
// 是否展示进度条
return (
<div class={{icol:true,[column.type]:true}}>
<div class="v">{this.calS(value)}</div>
</div>
)
}else{
return (
<div class={{icol:true,[column.type]:true}}>
<div class="p" style={{width:this.calW(value)}}></div>
<div class="v">{this.calS(value)}</div>
</div>
)
}
}
}
}
</script>
<style>
</style>