怎么动态改变elementUI导航条的百分比数字颜色

Question

 <template scope="scope" :style="{'color': customColor}">
            <el-progress
              :percentage="scope.row.rate"
              type="line"
              :color="customColorMethod"
              :show-text="false"
              class="progress">
            </el-progress>
            
            <span class="progress-text" >{{ scope.row.rate }}%</span>
  </template>

没有使用elementUI原生的百分比数字，因为不知道怎么改，就自己加了个span
:style绑在span上的话，会全部更改，想要的是随着进度不同，会变成不同的颜色，与进度条同色，要如何实现

Answer 1

<template>
<div id="app">
  <el-progress :percentage="percentage" :color="customColor"></el-progress>
  <span :style="{'color': customColor}">{{percentage}}%</span>

  <div>
    <el-button-group>
      <el-button icon="el-icon-minus" @click="decrease"></el-button>
      <el-button icon="el-icon-plus" @click="increase"></el-button>
    </el-button-group>
  </div>
</div>
</template>

<script>
var Main = {
  data() {
    return {
      percentage: 20
    };
  },
  computed: {
    customColor() {
      if (this.percentage < 30) {
        return "#909399";
      } else if (this.percentage < 70) {
        return "#e6a23c";
      } else {
        return "#67c23a";
      }
    }
  },
  methods: {
    increase() {
      this.percentage += 10;
      if (this.percentage > 100) {
        this.percentage = 100;
      }
    },
    decrease() {
      this.percentage -= 10;
      if (this.percentage < 0) {
        this.percentage = 0;
      }
    }
  }
};
</script>

用计算属性存颜色计算结果，既能复用逻辑又能缓存避免多次计算。

Answer 2

<span :class="getClass(p)">{{percent}}>/span>
methods:{
getClass(n){

  if(n<20) return 'green'
  if(n>20&&n<40) return 'blue'
  if(n>40&&n<80) return 'yellow'
   if(n>80&&n<95) return 'orange'
   if(n>=95&&n<=100) return 'red'

}
}
调用的时候传入对应的变量就行了

Answer 3

<el-table-column prop="rate" label="使用率">
          <template scope="scope">
            <el-progress
              :percentage="scope.row.rate"
              type="line"
              :color="customColor"
              :show-text="false"
              class="progress"
            >
            </el-progress>
            <span class="progress-text" :style="{color: customColor(scope.row.rate)}">{{ scope.row.rate }}%</span>
          </template>
</el-table-column>

进度条与文字公用同一个methods，来判断颜色，两处都要传值进去（重要）

methods: {
customColor(percentage) {
      if (percentage < 40) {
        return "grenn";
      } else if (percentage < 80 && percentage >= 40) {
        return "blue";
      } else if (percentage < 95 && percentage >= 80) {
        return "yellow";
      } else if (percentage < 100 && percentage >= 95) {
        return "orign";
      } else {
        return "red";
      }
    },
}