需求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找不到了,当时比较急就没有收藏……后面找到了会在评论区放原po链接
因为我是将进度条放在el-table的单元格内的,需要根据接口返回数据动态决定进度条的百分比,此处就需要考虑如何传值给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')
}
}
},