软件定制开发供应商【element】progress-修改进度条形状、高度、颜色、动态传值

需求1：软件定制开发供应商做成下图这样的进度条

 

实现思路：（此处是scss写法）

1.需要修改el-progress的形状

步骤：

软件定制开发供应商修改进度条的高度（宽）：

              .el-progress-bar__outer {
                height: 14px !important;
              }

软件定制开发供应商修改圆角样式：

              .el-progress-bar__inner {
                background-color: #16d3d5;
                border-radius: 0px; // 双边圆角
              }

2.需要修改el-progress的颜色和背景颜色

修改进度条表示百分比的颜色条

              .el-progress-bar__inner {
                background-color: #16d3d5;
              }

修改进度条背景色（此处需求是不要背景色，改为透明）

              .el-progress-bar .el-progress-bar__outer {
                border-radius: inherit;
                background-color: transparent !important;
              }

3.动态传数据显示百分比

这个是参考另外大佬的想法的，但是原找不到了，当时比较急就没有收藏……后面找到了会在评论区放原po链接

因为我是将进度条放在的单元格内的，需要根据接口返回数据动态决定进度条的百分比，此处就需要考虑如何传值给el-progress并且要是小于等于100的数字形式

<el-progress v-if="item.label === '' && scope.row.cnt" 
             :percentage="Math.ceil(scope.row.cnt/10000*100)"
</el-progress>

这里应该还需要优化的是，除数不应该是写死的，应该是要给整个scope.row.cnt系列的数值制定一个参考的整数值，以scope.row.cnt在这个整数值的占比再乘100才是合理的。但是我还没想到怎么做，大佬们有可以借鉴的方法希望能在评论区留言，感激！

4.去除进度条后面带的文字

只需要<el-progress :show-text="false" />就可以啦

5.根据数值的大小动态决定进度条颜色

例子: 数值< 20 绿色 20< 数值 < 50 黄色 >50红色

思路：此处用计算属性实现样式的动态改变

<lel-progress :color=changeProgressColor(scope.row.cnt)></el-progress>

（不加双引号的时候就可以传值！！）

  computed: {
    changeProgressColor() {
      return function(people) {
        return people <= 20 ? 'green' : (people <= 50 ? 'yellow' : 'red')
      }
    }
  },