el-progress组件使用,样式修改,自定义文字

正常的el-progress显示是这样的

修改后

自动计算percentage,format自定义显示文字

js 复制代码
<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>
相关推荐
前端大白话4 分钟前
Vue2和Vue3语法糖差异大揭秘:一文读懂,开发不纠结!
javascript·vue.js·设计模式
剽悍一小兔4 分钟前
小程序发布后,不能强更的情况下,怎么通知到用户需要去更新?
前端
115432031q4 分钟前
基于SpringBoot+Vue实现的旅游景点预约平台功能十三
java·前端·后端
JiangJiang5 分钟前
🧠 面试官:受控组件都分不清?还敢说自己写过 React?
前端·react.js·面试
tianchang5 分钟前
JS 中 Map 的概念与使用
前端·javascript
Jenlybein5 分钟前
[ Javascript 面试题 ]:提取对应的信息,并给其赋予一个颜色,保持幂等性
前端·javascript·面试
Carlos_sam5 分钟前
Opnelayers:向某个方向平移指定的距离
前端·javascript
夜熵6 分钟前
JavaScript 中的 this
前端·面试
绅士玖9 分钟前
Vue.js 核心特性解析:响应式原理与组合式API实践
vue.js
前端小巷子9 分钟前
CSS 单位指南
前端·css