element-ui中el-progress的复杂型使用场景

最新推荐文章于 2024-06-17 08:54:55 发布

yx-02

最新推荐文章于 2024-06-17 08:54:55 发布

阅读量1.6k

点赞数 2

文章标签： vue.js

本文链接：https://blog.csdn.net/YANG_helloworld/article/details/126157109

版权

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 ;

        },
	}