效果图

通过设置百分比为100,动态修改进度条的宽度完成

<template><div class="myProgressBox"><div class="index">{{ index }}</div><div class="typeTitle">{{ typeTitle }}</div><div class="twoProgressBox"><el-progress :stroke-width="12" :percentage="percentage1" :format="formatZS"></el-progress><el-progress class="yjcprogress" :stroke-width="12" :percentage="percentage2" :format="formatYJC"  :style="{ width: '80%' }"></el-progress></div></div>
</template><script>export default {components: {},props: {index: {type: String,default: '1'},typeTitle: {type: String,default: '类型1'},ZSNumber: {//总数type: String,default: '918'},YJCNumber: {//已解除type: String,default: '500'},percentage1: {//总数百分比type: Number,default: 100},percentage2: {//已解除百分比type: Number,default: 100},},data() {return {};},mounted() { },methods: {// 返回总数formatZS(percentage) {return this.ZSNumber},// 返回已解除formatYJC(percentage) {return this.YJCNumber}},
};
</script><style scoped lang="scss">
.myProgressBox {.twoProgressBox {.yjcprogress {.el-progress{width: 50%;}}.el-progress.yjcprogress.el-progress--line{// width: 50%;}}}
</style>