正常的el-progress顯示是這樣的

修改后

自動計算percentage，format自定義顯示文字文章來源地址http://www.zghlxwxcb.cn/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>

到了這里，關于el-progress組件使用，樣式修改，自定義文字的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！