vue3中 el-process动态绑定环形样式

53 阅读1分钟
  const customColors = [
    { color: "#E65D6E", percentage: 60 },
    { color: "#FEC171", percentage: 80 },
    { color: "#30B08F", percentage: 100 },
  ];
  
     <el-progress :percentage="
              Number(((item.pxCount * 100) / item.targetNumber).toFixed())
            " :show-text="false" :color="customColors" />
            
            
            <el-progress type="circle" :percentage="Number(step.stepJd)" :color="customColors">
              <template #default="{ percentage }">
                <div class="percentage-value" title="企业完成进度">
                  {{ percentage }}%
                </div>
                <div class="percentage-companyvalue" title="未完成企业数/企业总数">
                  <span :class="
                    step.customerList.length !=
                      step.customerList.filter((item) => item.doneFlag)
                        .length
                      ? 'text-pink'
                      : 'text-green'
                  ">
                    {{
                      step.customerList.length -
                      step.customerList.filter((item) => item.doneFlag)
                        .length
                    }}
                  </span>
                  / {{ step.customerList.length }}
                </div>
              </template>
            </el-progress>