Vue使用el-statistic和el-card显示大屏中的统计数据


一、页面内容:
<el-row :gutter="20"><el-col :span="6"><el-card class="box-card"><div><el-statisticgroup-separator=",":precision="2":value="value2":title="title"></el-statistic></div></el-card></el-col><el-col :span="6"><el-card class="box-card"><div><el-statistic title="男女比"><template slot="formatter">456/2</template></el-statistic></div></el-card></el-col><el-col :span="6"><el-card class="box-card"><div><el-statisticgroup-separator=",":precision="2"decimal-separator=".":value="value1":title="title"><template slot="prefix"><i class="el-icon-s-flag" style="color: red"></i></template><template slot="suffix"><i class="el-icon-s-flag" style="color: blue"></i></template></el-statistic></div></el-card></el-col><el-col :span="6"><el-card class="box-card"><div><el-statistic :value="like ? 521 : 520" title="Feedback"><template slot="suffix"><span @click="like = !like" class="like"><iclass="el-icon-star-on"style="color:red"v-show="!!like"></i><i class="el-icon-star-off" v-show="!like"></i></span></template></el-statistic></div></el-card></el-col>
</el-row>
二、数据
data() {return {like: true,value1: 4154.564,value2: 1314,title: "增长人数",};
},
三、样式
<style scoped lang="scss">
.like {cursor: pointer;font-size: 25px;display: inline-block;
}
.box-card {width: 90%;height: 100px;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/573116.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Flink SQL 基于Update流出现空值无法过滤问题

问题背景 问题描述 基于Flink-CDC &#xff0c;Flink SQL的实时计算作业在运行一段时间后&#xff0c;突然发现插入数据库的计算结果发生部分主键属性发生失败&#xff0c;导致后续计算结果无法插入&#xff0c; 超过失败次数失败的情况问题报错 Caused by: java.sql.BatchUp…

基于大语言模型的云故障根因分析|顶会EuroSys24论文

*马明华 微软主管研究员 2021年CCF国际AIOps挑战赛程序委员会主席&#xff08;第四届&#xff09; 2021年博士毕业于清华大学&#xff0c;2020年在佐治亚理工学院做访问学者。主要研究方向是智能运维&#xff08;AIOps&#xff09;、软件可靠性。近年来在ICSE、FSE、ATC、EuroS…

151 shell编程,正则表达式,在C语言中如何使用正则表达式

零&#xff0c;坑点记录&#xff1a;bash 和 dash 的区别&#xff0c;导致的坑点 查看当前用的shell 是啥&#xff0c;用的是/bin/bash hunandedehunandede-virtual-machine:~$ echo $SHELL /bin/bash 当shell 脚本运行的时候&#xff08;后面会学到方法&#xff0c;这里是最…

SQLite中的动态内存分配(五)

返回&#xff1a;SQLite—系列文章目录 上一篇&#xff1a;SQLite中的原子提交&#xff08;四&#xff09; 下一篇&#xff1a;SQLite使用的临时文件&#xff08;二&#xff09; ​概述 SQLite使用动态内存分配来获得 用于存储各种对象的内存 &#xff08;例如&#xff1a…

现货黄金投资锁仓是什么意思?

在金融投资领域&#xff0c;特别是黄金市场中&#xff0c;“锁仓”是一个常见的策略。那么&#xff0c;现货黄金投资中所说的“锁仓”是什么意思呢&#xff1f;简单来说&#xff0c;锁仓是投资者为了保护自己的投资不受未来价格波动的影响&#xff0c;同时锁定当前的价格水平&a…

SpringBoot整合Redis:缓存击穿--互斥锁解决

&#x1f389;&#x1f389;欢迎光临&#xff0c;终于等到你啦&#x1f389;&#x1f389; &#x1f3c5;我是苏泽&#xff0c;一位对技术充满热情的探索者和分享者。&#x1f680;&#x1f680; &#x1f31f;持续更新的专栏Redis实战与进阶 本专栏讲解Redis从原理到实践 …

flutter Got socket error trying to find package nested at

flutter Got socket error trying to find package nested at xxx 报错信息&#xff1a;“Got socket error trying to find package nested at” 通常出现在Flutter尝试从pub.dev获取依赖包时&#xff0c;由于网络问题导致无法连接到pub.dev或者无法正确解析包的路径。 例如&…

遥感卫星影像质量评价指标汇总

1. 主观评价方法 以人为图像的评价者&#xff0c;根据自己的评价尺度和经验对图像质量进行评价。 2. 客观评价方法 1)均方差 2)信噪比 主要用来评价影像经压缩、传输、增强等处理前后的质量变化情况&#xff0c;其本质与均方差类似。 3)方差 反映了图像各个像元灰度相对…

【前端面试3+1】03深拷贝浅拷贝、let和var、css盒模型、【有效括号】

一、深拷贝浅拷贝 深拷贝和浅拷贝都是用于复制对象或数组的概念&#xff0c;但它们之间有着重要的区别&#xff1a; 1. 浅拷贝&#xff1a; 浅拷贝是指在拷贝对象或数组时&#xff0c;只会复制一层对象的属性或元素&#xff0c;而不会递归地复制嵌套的对象或数组。因此&#xf…

Kubeflow文档1:介绍与架构

Kubeflow 2024/3/19版本的文档 此专栏用来展示相关的内容翻译&#xff0c;重点关注本地部署&#xff0c;关于运营商的方案&#xff0c;请自行查阅 文档地址https://www.kubeflow.org/docs/ 开始编辑时间&#xff1a;2024/3/27&#xff1b;最后编辑时间2024/3/27 Kubeflow文…

记录关于智能家居的路程的一个bug___Segmentation fault(段错误)

前言 其实发生段错误的情况有很多&#xff1a; 其实在项目的开发中最有可能的错误就是①和②&#xff0c;考虑到本项目数组用的比较少&#xff0c;所以主要是考虑错误①指针的误用。 有时候错误就是那么离谱&#xff0c;声音也算是一种设备&#xff1f;&#xff1f;&#xff…

论文笔记:Retrieval-Augmented Generation forAI-Generated Content: A Survey

北大202402的RAG综述 1 intro 1.1 AICG 近年来&#xff0c;人们对人工智能生成内容&#xff08;AIGC&#xff09;的兴趣激增。各种内容生成工具已经精心设计&#xff0c;用于生产各种模态下的多样化对象 文本&代码&#xff1a;大型语言模型&#xff08;LLM&#xff09;…