element el-progress渐变色进度条

根据状态加载不同渐变色的进度条及百分比数值

	{{scope.row.progress}}

css:

.el-progress{
  width:100%;		
}
.el-progress__text{
  color: #fff;
  font-size: 14px;
}
.el-progress-bar__outer{
  height: 12px!important;
  border: 1px solid #78335f;
  background-color:transparent;
}

/* 渐变进度条 */
.el-bg-inner-running .el-progress-bar__inner{
  background-color: unset;
  background-image: linear-gradient(to right, #3587d8 , #6855ff);
}
.el-bg-inner-error .el-progress-bar__inner{
  background-image: linear-gradient(to right, #3587d8 , #fb3a7e);
}
.el-bg-inner-done .el-progress-bar__inner{
  background-image: linear-gradient(to right, #3587d8 , #53ff54);
}

注意：有时候el-progress代码写完后，运行发现进度条没有显示，大概率事件是没有给.el-progress设置宽度，一般情况下设置.el-progress{width:100%}即可。
js:
vue中filters代码：

showProgressColor: function (val) {
	if (val == '进行中') {
    	return val = 'el-bg-inner-running';
    } else if (val == '失败') {
       return val = 'el-bg-inner-error'
   } else if (val == '完成') {
       return val = 'el-bg-inner-done'
   }
}

显示效果：