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

本文介绍了如何在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 ;

        },
	}

如下图:

请添加图片描述

### 使用 `el-progress` 组件实现柱状进度条 Element UI 提供了一个名为 `el-progress` 的组件来创建各种类型的进度条,其中包括线性进度条。为了模拟柱状进度条的效果,可以通过设置样式属性使默认的线性进度条垂直显示。 #### 基本用法 下面是一个简单的例子,展示了如何配置 `el-progress` 来作为竖直方向上的柱状进度条: ```html <template> <div class="progress-container"> <!-- 设置 type 属性为 'line' 并通过 CSS 控制宽度 --> <el-progress :percentage="70" status="success" :show-text="false"></el-progress> </div> </template> <script> export default { name: "VerticalProgress" }; </script> <style scoped> /* 自定义容器高度 */ .progress-container { height: 200px; } .el-progress-bar__outer { width: 18px !important; /* 调整进度条厚度 */ border-radius: 9px; } .el-progress-bar__inner { border-radius: 9px; } /* 将进度条旋转90度形成柱状效果 */ .el-progress--line .el-progress-bar { transform: rotate(90deg); margin-left: -50%; } </style> ``` 此代码片段中,`:percentage` 参数指定了当前完成的比例;`status` 可选参数用来指定进度条的状态(如成功、警告或错误),这里设为 `"success"` 表示已完成的任务[^1]。 需要注意的是,在实际应用中可能还需要进一步调整样式以适应具体的设计需求。此外,如果希望更精确地控制外观,则可以考虑自定义类名并利用这些类名来进行更加细致的CSS定制化工作。 对于复杂的应用场景,比如构建项目管理与进度监控页面时涉及到多个不同状态下的任务进展展示,可以根据实际情况组合使用多种图表形式,例如结合 ECharts 创建更为直观的数据视图[^2]。 当面对大屏展示系统这样的大型项目时,除了基本的功能外,还应考虑到用户体验以及视觉呈现的一致性和美观性,确保所有元素都能和谐共存于同一界面上[^3]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值