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

效果图:

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>

 

  • 7
    点赞
  • 35
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值