elementui进度条Progress组件

ops/2024/12/19 8:02:51/

一、Progress组件

二、各部分代码

 1.html代码

<div><div class="showprogress" v-for="item in regions" :key="item.name"><span>{{ item.name }}</span><el-progress :percentage="percentage(item.count, totalCount)" :format="formatCount(item.count)" :color="customColorMethod"></el-progress></div>
</div>

使用v-for指令遍历regions数组,为每个区域创建一个进度条显示。

使用<el-progress>组件(Element UI库中的进度条组件)来显示进度。

:percentage:计算并绑定每个进度条的百分比。

:format:自定义进度条上显示的文本。

:color="customColors":绑定进度条的颜色。


2.部分CSS代码

.showprogress{display: flex;justify-content: space-around;align-items: center;span {width: 50px;font-size: 12px;color: #8CBAEE;}/deep/.el-progress__text {font-size: 12px !important;color: #8CBAEE;}
}

regions数组:定义了名称及其对应的count值,可动态获取数据。

totalCount:定义了用于计算百分比的总数。

percentage方法:接受两个参数(counttotal),计算并返回百分比。

formatCount方法:常见的做法是直接显示百分比或者格式化后的百分比字符串。

customColorMethod方法:根据进度百分比返回不同的颜色。

3.js代码

  data() {return {regions: [{ name: "大足区", count: 80 },{ name: "秀山县", count: 100 },{ name: "涪陵区", count: 160 },{ name: "万州区", count: 40 },{ name: "忠县", count: 200 }],totalCount: 200};},methods: {percentage(count, total) {return (count / total) * 100;},formatCount(count) {return percentage => {return `${count}`; // 直接返回条数};},customColorMethod(percentage) {if (percentage < 20) {return "#8C39A1";} else if (percentage < 40) {return "#04FCFC";} else if (percentage < 60) {return "#7C3DFD";}else if (percentage < 80) {return "#01A4E7"}else {return "#6f7ad3";}},},}

以上是一个简单的进度条展示样式,实现其他样式需细节上修改一些。

 若文章对你有帮助,点赞、收藏加关注吧!


http://www.ppmy.cn/ops/143131.html

相关文章

软件工程复习重点(第一章 软件工程概述)

1.什么是软件&#xff1f;软件有什么特点&#xff1f; 软件分类&#xff1f; 计算机软件--计算机系统中的程序、数据及其文档的统称。 2.软件发展的3个阶段 &#xff08;1&#xff09;程序设计阶段&#xff1b;&#xff08;2&#xff09;程序系统阶段&#xff1b;&#xff08…

简单的go写的websocket协议 im 聊天 服务,流程简单清晰,采用golang编写,flutter im客户端。免费开源哈,随意用

mini-im 1、说明&#xff1a; 项目地址&#xff1a;https://github.com/haomiao33/minim 1.1、项目介绍&#xff1a; 简单的go写的im服务&#xff0c;流程简单清晰,大部分接口使用的是http&#xff0c;方便流程控制。login服务目前只是用来做服务端推送消息通知到客户端。本…

[C++]多态

1. 什么是多态性&#xff1f; 1.定义 多态性是指同一个函数或操作在不同对象上表现出不同的行为。 2.分类 C 中的多态性主要分为两种&#xff1a; 1.编译时多态性&#xff08;静态多态性&#xff09;&#xff1a; 编译时决定调用哪个函数。通过 函数重载 和 运算符重载 实…

Linux下常用的网络编程函数详解

在网络编程中&#xff0c;我们经常需要处理 IP 地址和端口号等数据&#xff0c;这些数据需要在主机字节序&#xff08;Host Byte Order&#xff09;与网络字节序&#xff08;Network Byte Order&#xff09;之间进行转换。 什么是字节序&#xff1f; 字节序指的是多字节数据在…

fabric.js

目录 一、在canvas上画简单的图形 二、在canvas上用路径(Path)画不规则图形 三、在canvas上插入图片并设置旋转属性(angle) 四、让元素动起来(animate) 五、图像过滤器(filters)让图片多姿多彩 六、颜色模式(Color)和相互转换(toRgb、toHex) 七、对图形的渐变填充(Gradi…

常用的es操作

前言 我们前面写过ES基础操作和ES高级查询 写的都很细&#xff0c;但是很多时候我们仅仅是忘记具体的某个语法&#xff0c;去那两篇博客查找就很麻烦了&#xff0c;这篇博客就把常用的ES操作进行总结。 常用操作 建索引&#xff08;建表&#xff0c;不过并没有指定字段名和类…

【Qt】信号、槽

目录 一、信号和槽的基本概念 二、connect函数&#xff1a;关联信号和槽 例子&#xff1a; 三、自定义信号和槽 1.自定义槽函数 2.自定义信号函数 例子&#xff1a; 四、带参的信号和槽 例子&#xff1a; 五、Q_OBJECT宏 六、断开信号和槽的连接 例子&#xff1a; …

Java匿名类和lambda

匿名类 匿名类就是一个语法糖&#xff0c;可以帮我们省略定义类名这一步&#xff0c;直接创建对象&#xff0c;简化代码 匿名类规则&#xff1a; 匿名类必须继承一个父类或实现一个接口&#xff0c;并且最多继承一个父类或实现一个接口。匿名类可以继承父类的方法&#xff0c…