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

效果图：

1. 当前数据结构

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

2. 前端代码

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'
    }
}

完整代码：