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

yx-02

于 2022-08-04 12:21:57 发布

阅读量1.8k

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/YANG_helloworld/article/details/126157109

本文介绍了如何在Vue项目中利用Element-UI实现动态添加多个环形进度条，并根据每个进度条的状态显示不同的文字内容。通过自定义`format`函数结合`v-for`指令，实现了在环形进度条组件中根据数组数据动态设置百分比和状态描述。这种方法巧妙地规避了Element-UI组件限制，为每个环形进度条赋予了个性化的状态信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 ;

        },
	}

如下图:

请添加图片描述