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>
相关推荐
一道雷3 分钟前
🧩 Vue Router嵌套路由新范式:无需嵌套 RouterView 的布局实践
前端·vue.js
Mintopia8 分钟前
🎯 光与面的命运交锋:Möller-Trumbore 线段三角形相交算法全解析
前端·javascript·计算机图形学
Ares-Wang15 分钟前
Vue》》@ 用法
前端·javascript·vue.js
心.c1 小时前
JavaScript单线程实现异步
开发语言·前端·javascript·ecmascript
爱分享的程序员1 小时前
前端面试专栏-前沿技术:31.Serverless与云原生开发
前端·javascript·面试
姜 萌@cnblogs2 小时前
Saga Reader 0.9.9 版本亮点:深入解析核心新功能实现
前端·ai·rust
gnip2 小时前
实现elementplus官网主题切换特效
前端·css
Darling02zjh2 小时前
HTML5
前端·html·html5
开开心心_Every2 小时前
多线程语音识别工具
javascript·人工智能·ocr·excel·语音识别·symfony
成长ing121382 小时前
闪白效果
前端·cocos creator