当前位置: 首页 > news >正文

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.lryc.cn/news/326664.html

相关文章:

  • 12.2024
  • 【学习心得】Jupyter常用操作与魔法方法
  • Linux命令别名
  • Docker和 Containerd 的区别
  • Qt实现TFTP Server和 TFTP Client(二)
  • 【b站李炎恢】Vue.js Element UI | 十天技能课堂 | 更新中... | 李炎恢
  • AI大语言模型工程师学习路线
  • 基于树莓派实现 --- 智能家居
  • 基于Arduino IDE 野火ESP8266模块 一键配网 的开发
  • 左手医生:医疗 AI 企业的云原生提效降本之路
  • ceph集群部署
  • C#WPF控件Label宽度绑定到父控件的宽度
  • HMI的学习
  • 工业无线网关在汽车制造企业的应用效果和价值-天拓四方
  • 校园app开发流程-uniapp开发-支持APP小程序H5-源码交付-跑腿-二手市场-交友论坛等功能,学校自由选择!
  • Machine Learning机器学习之K近邻算法(K-Nearest Neighbors,KNN)
  • 四、在数据库里建库
  • 蓝桥杯-网络安全比赛(2)基础学习-正则表达式匹配电话号码、HTTP网址、IP地址、密码校验
  • 如何创建azure pipeline
  • 缓存菜品、套餐、购物车相关功能
  • 微信小程序的页面交互1
  • win10 docker zookeeper和kafka搭建
  • 【Redis】快速入门 数据类型 常用指令 在Java中操作Redis
  • 【tingsboard开源平台】下载数据库,IDEA编译,项目登录
  • Web3:探索区块链与物联网的融合
  • [BT]BUUCTF刷题第9天(3.27)
  • html页面使用@for(){},@if(){},利用jquery 获取当前class在列表中的下标
  • pulsar: 批量接收消息
  • LNMP架构之mysql数据库实战
  • aws使用记录