el-progress组件使用：自动计算percentage，format自定义显示文字

效果图：

 

 完整代码：

 1 <template>
 2     <div>
 3         <div class="content-view">
 4             <div v-for="(item, index) in progressList" class="item-view">
 5                 <el-progress :text-inside="true" :stroke-width="26" :percentage="setItemProgress(item)" v-if="!isNaN(parseInt((item.planNum/item.completeNum)*100))"
 6                  :status="setItemStatus(item)" :format="setItemText(item)"></el-progress>
 7             </div>
 8         </div>
 9     </div>
10  
11 </template>
12  
13 <script>
14     export default {
15         data() {
16             return {
17                 progressList: [{
18                         planNum: 150,
19                         completeNum: 80 
20                     },
21                     {
22                         planNum: 70,
23                         completeNum: 70
24                     },
25                     {
26                         planNum: 70,
27                         completeNum: 90
28                     }
29                 ]
30  
31             }
32         },
33  
34         methods: {
35             setItemProgress(data) {
36                 if (data.planNum > data.completeNum) {
37                     return 100
38                 } else {
39                     return parseInt((data.planNum / data.completeNum).toFixed(1) * 100)
40                 }
41             },
42  
43             setItemText(row) {
44                 return () => {
45                     return '计划： ' + row.planNum + '，完成： ' + row.completeNum
46                 }
47             },
48  
49             setItemStatus(data) {
50                 if (data.planNum > data.completeNum) {
51                     return 'exception'
52                 } else if (data.planNum === data.completeNum) {
53                     return 'success'
54                 } else {
55                     return 'warning'
56                 }
57             }
58         }
59     }
60 </script>
61 <style lang="scss" scoped>
62     .content-view {
63         height: calc(100vh - 84px);
64         background-color: #FFFFFF;
65         padding: 20px;
66     }
67  
68     .item-view {
69         margin-bottom: 1rem;
70     }
71 </style>

 

posted @ 2020-11-07 10:34  yuwenjing  阅读(9417)  评论(2)  编辑  收藏  举报