vue中循环添加多个动态环形进度条,并且每个对应添加自己的状态文字
根据目前的element-ui, 无法直接使用format属性去循环动态添加多个环形进度条的指定文字内容, 因为format中限定了函数参数 ,如下:
因此采取了一些迂回的写法
<div v-for="(item , index) in arr">
<el-progress type="circle" :percentage="item.pc" :color="progressColor(item)" :format="(p) => progressFormat(p, item)"></el-progress>
</div>
export default{
methods:{
progressFormat(p,o){
//这里的p是指element-ui中设置的入参 , o是数组中对应的每一条数据
let res = p + '% ';
if(o.ps == 1){
res += '正常';
}else if(o.ps == 2){
res += '不正常';
}else if(o.ps == 3){
res += '不知道';
}
return res ;
},
}
如下图:文章来源：https://www.toymoban.com/news/detail-567134.html
文章来源地址https://www.toymoban.com/news/detail-567134.html
到了这里，关于element-ui中el-progress的复杂型使用场景的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
