【Vue + ElementUI】el-progress 各类常用场景(自动计算percentage,format自定义显示文字)

作者: wxfeng 分类: web前端 发布时间: 2020-10-26 10:24    阅读 926 次

转自:https://blog.csdn.net/weixin_41832017/article/details/108458234

效果图

1,当前数据结构

progressList: [
    {
        planNum: 150,   // 计划数量
        completeNum: 80  // 完成数量
    },
    {
        planNum: 70,
        completeNum: 70
    },
    {
        planNum: 70,
        completeNum: 90
    }
]

2. 前端代码

<div v-for="(item, index) in progressList" class="item-view">
<el-progress :text-inside="true" :stroke-width="26" :percentage="setItemProgress(item)" v-if="!isNaN(parseInt((item.planNum/item.completeNum)*100))"
:status="setItemStatus(item)" :format="setItemText(item)"></el-progress>
</div>

3,方法

// 设置进度
setItemProgress(data) {
    if (data.planNum > data.completeNum) {
        return 100
    } else {
        return parseInt((data.planNum / data.completeNum).toFixed(1) * 100)
    }
},
 
// 自定义进度条文字
setItemText(row) {
    return () => {
        return '计划: ' + row.planNum + ',完成: ' + row.completeNum
    }
},
 
// 设置当前进度条状态,显示不同颜色
setItemStatus(data) {
    if (data.planNum > data.completeNum) {
        return 'exception'
    } else if (data.planNum === data.completeNum) {
        return 'success'
    } else {
        return 'warning'
    }
}

完整代码:

<template>
<div>
<div class="content-view">
<div v-for="(item, index) in progressList" class="item-view">
<el-progress :text-inside="true" :stroke-width="26" :percentage="setItemProgress(item)" v-if="!isNaN(parseInt((item.planNum/item.completeNum)*100))"
:status="setItemStatus(item)" :format="setItemText(item)"></el-progress>
</div>
</div>
</div>

</template>

<script>
export default {
data() {
return {
progressList: [{
planNum: 150,
completeNum: 80 
},
{
planNum: 70,
completeNum: 70
},
{
planNum: 70,
completeNum: 90
}
]

}
},

methods: {
setItemProgress(data) {
if (data.planNum > data.completeNum) {
return 100
} else {
return parseInt((data.planNum / data.completeNum).toFixed(1) * 100)
}
},

setItemText(row) {
return () => {
return '计划: ' + row.planNum + ',完成: ' + row.completeNum
}
},

setItemStatus(data) {
if (data.planNum > data.completeNum) {
return 'exception'
} else if (data.planNum === data.completeNum) {
return 'success'
} else {
return 'warning'
}
}
}
}
</script>
<style lang="scss" scoped>
.content-view {
height: calc(100vh - 84px);
background-color: #FFFFFF;
padding: 20px;
}

.item-view {
margin-bottom: 1rem;
}
</style>

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注