el-progress组件使用，样式修改，自定义文字-Toy模板网

这篇具有很好参考价值的文章主要介绍了el-progress组件使用，样式修改，自定义文字。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

正常的el-progress显示是这样的
el-progress组件使用，样式修改，自定义文字,javascript,前端,vue.js

修改后
el-progress组件使用，样式修改，自定义文字,javascript,前端,vue.js
自动计算percentage，format自定义显示文字文章来源地址https://www.toymoban.com/news/detail-595076.html

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