vue elementui el-table 表格里边展示四分位图

vue elementui el-table 表格里边展示四分位图

直接上代码(效果图在文章末尾):

父组件:

<template>
<el-table size="small":header-cell-style="headerCellStyle()"style="width: 100%;"highlight-current-rowrow-key="index":data="tableData1" ><el-table-columnlabel="标题1"prop="name1"align="left"><template slot-scope="scope"><span>{{ scope.row.name1}}</span></template></el-table-column><el-table-columnlabel="数据1"prop="value1"align="center"><template slot-scope="scope"><div v-if="scope.row.name1 === '指标4'"><quartileChart :quartile="scope.row.value1"></quartileChart></div><span v-else>{{ scope.row.value1}}</span></template></el-table-column><el-table-columnlabel="数据2"prop="value2"align="center"><template slot-scope="scope"><div v-if="scope.row.name1 === '指标4'"><quartileChart :quartile="scope.row.value2"></quartileChart></div><span v-else>{{ scope.row.value2}}</span></template></el-table-column><el-table-columnlabel="数据3"prop="value3"align="center"><template slot-scope="scope"><div v-if="scope.row.name1 === '指标4'"><quartileChart :quartile="scope.row.value3"></quartileChart></div><span v-else>{{ scope.row.value3}}</span></template></el-table-column><el-table-columnlabel="数据4"prop="value4"align="center"><template slot-scope="scope"><div v-if="scope.row.name1 === '指标4'"><quartileChart :quartile="scope.row.value4"></quartileChart></div><span v-else>{{ scope.row.value4}}</span></template></el-table-column><el-table-columnlabel="数据5"prop="value5"align="center"><template slot-scope="scope"><div v-if="scope.row.name1 === '指标4'"><quartileChart :quartile="scope.row.value5"></quartileChart></div><span v-else>{{ scope.row.value5}}</span></template></el-table-column></el-table>
</template>
<script>
import quartileChart from '@/components/quartileChart.vue' // 引入子组件(四分位图),注意引入路径
export default {
components: { quartileChart },data() {return {tableData1: [{name1: '指标1',value1: '0.33%', value2: '0.33%', value3: '0.33%', value4: '0.33%', value5: '0.33%', },{name1: '指标2',value1: '0.33%', value2: '0.33%', value3: '0.33%', value4: '0.33%', value5: '0.33%', },{name1: '指标3',value1: '0.33%', value2: '0.33%', value3: '0.33%', value4: '0.33%', value5: '0.33%', },{name1: '指标4',value1: '1', value2: '2', value3: '3', value4: '4', value5: null, }]}methods: {headerCellStyle () {return {color: " #333 !important", backgroundColor: "#cedff3  !important",fontSize: '14px',fontWeight: 500,}}}}
}</script>

子组件:

<template><div><div v-if="5 - Number(quartile) === 1" class="ranking rank_1"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div><div v-else-if="5 - Number(quartile) === 2" class="ranking rank_2"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div><div v-else-if="5 - Number(quartile) === 3" class="ranking rank_3"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div><div v-else-if="5 - Number(quartile) === 4" class="ranking rank_4"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div><div v-else class="ranking rank_5"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div></div>
</template><script>
export default {name: 'quartileChart',components: {},props: {quartile: {type: String,}},data () {return {}},created () {},mounted () {},computed: {},watch: {},methods: {},
}
</script><style lang="scss" scoped>
.ranking{width: 47px;margin: 0 auto;height: 39px;margin-top: 1px;margin-bottom: 2px;div {height: 9px;zoom: 1;overflow: hidden;border: 1px solid #dcdcdc;margin-top: -1px;}
}
.rank_1 { .r4 {height: 11px;}.r3 {height: 11px;}.r2 {height: 11px;}.r1 {border: 0;background: #e1edfc;height: 11px;}
}
.rank_2 { .r4 {height: 11px;}.r3 {height: 11px;}.r2 {border: 0;background: #cbdff8;height: 11px;}.r1 {border: 0;background: #e1edfc;height: 11px;}
}
.rank_3 { .r4 {height: 11px;}.r3 {border: 0;background: #b3ceef;height: 11px;}.r2 {border: 0;background: #cbdff8;height: 11px;}.r1 {border: 0;background: #e1edfc;height: 11px;}
}
.rank_4 { .r4 {border: 0;background: #94b7e3;height: 11px;}.r3 {border: 0;background: #b3ceef;height: 11px;}.r2 {border: 0;background: #cbdff8;height: 11px;}.r1 {border: 0;background: #e1edfc;height: 11px;}
}
.rank_5 { .r4 {height: 11px;}.r3 {height: 11px;}.r2 {height: 11px;}.r1 {height: 11px;}
}</style>

展示效果图:

在这里插入图片描述

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

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

相关文章

clickhouse与oracle传输数据

参考 https://github.com/ClickHouse/clickhouse-jdbc-bridge https://github.com/ClickHouse/clickhouse-jdbc-bridge/blob/master/docker/README.md clickhouse官方提供了一种方式&#xff0c;可以实现clickhouse与oracle之间传输数据&#xff0c;不仅仅是oracle&#xff0…

Qt下使用OpenCV截取图像并在QtableWidget表格上显示

文章目录 前言一、在QLabel上显示图片并绘制矩形框二、保存矩形框数据为CSV文件三、保存截取图像四、将截取图像填充到表格五、图形视图框架显示图像六、示例完整代码总结 前言 本文主要讲述了在Qt下使用OpenCV截取绘制的矩形框图像&#xff0c;并将矩形框数据保存为CSV文件&a…

Qt绘制边框有阴影兼容性问题

在Qt开发过程中&#xff0c;有时候我们要显示一个有阴影的对话框&#xff0c;这时一般采用自定义实现&#xff0c;然而最近在开发时软件时&#xff0c;Win11上显示正常&#xff0c;Win10或其他Win11电脑显示不正常&#xff0c;存在兼容性问题吗&#xff1f; 下面是具体的源码 …

PPSSPPSDL for Mac v1.17.1 PSP游戏模拟器(附500款游戏) 激活版

PPSSPPSDL for Mac是一款模拟器软件&#xff0c;它允许用户在Mac上运行PSP&#xff08;PlayStation Portable&#xff09;游戏。通过这款模拟器&#xff0c;用户可以体验到高清甚至更高的分辨率的游戏画面&#xff0c;同时还能够升级纹理以提升清晰度&#xff0c;并启用后处理着…

nvm下载的node没有npm

nvm下载的node没有npm 相信大家最近可能发现自己使用的nvm下载nodejs没有npm了。 会出现这种情况&#xff1a; C:\Users\89121>nvm install 15 Downloading node.js version 15.14.0 (64-bit)... Complete Downloading npm version 7.7.6... Download failed. Rolling Bac…

WebGL开发框架比较

WebGL开发框架提供了一套丰富的工具和API&#xff0c;使得在Web浏览器中创建和操作3D图形变得更加容易。以下是一些流行的WebGL开发框架及其各自的优缺点。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1.Three.js 优点&#xff1a…

ThingsBoard服务端使用RPC通过网关给设备发送消息

一、概述 1、发送服务器端网关RPC 二、案例&#xff1a; 1、建立设备与网关之间的通讯 2、查看设备和网关是否在线状态啊 3、通过 仪表盘&#xff0c;创建设备A的模拟RPC调用的窗口链接 4、在客户端的网关设备上订阅RPC网关的主题信息 5、通过服务端的窗口&#xff0c;发…

电脑提示丢失iutils.dll怎么办?一分钟教你搞定dll丢失问题

在计算机世界中&#xff0c;DLL&#xff08;Dynamic Link Library&#xff0c;动态链接库&#xff09;文件扮演着至关重要的角色&#xff0c;它们如同乐高积木中的基础模块&#xff0c;不同程序通过调用这些模块来实现各种功能。其中&#xff0c;iutils.dll就是这样一款不可或缺…

苹果电脑装虚拟机好用吗 苹果电脑装虚拟机要钱吗 Parallels对mac的损害 Parallels占用多大空间 PD19

在当今数字化的时代&#xff0c;人们对电脑系统跨设备互联的需求越来越高。作为拥有广泛用户群体的苹果电脑&#xff0c;许多用户会有在Mac系统中运行其他操作系统的需求。在这种情况下&#xff0c;安装虚拟机是一个较好的解决方案。那么接下来就给大家介绍苹果电脑装虚拟机好用…

Neo-reGeorg明文流量

Neo-reGeorg 1 同IP对&#xff0c;同一个URI&#xff0c;第一个TCP流是“GET”请求&#xff0c;随后的TCP流请求为“POST”。&#xff08;jsp\jspx\php&#xff09; 2 第一个TCP流中&#xff0c;GET只有一个会话。&#xff08;jsp\jspx\php&#xff09;&#xff0c;响应body79…

Echarts-知识图谱

Echarts-知识图谱 demo地址 打开CodePen 效果 思路 1. 生成根节点 2. 根据子节点距离与根节点的角度关系&#xff0c;生成子节点坐标&#xff0c;进而生成子节点 3. 从子节点上按角度生成对应的子节点 4. 递归将根节点与每一层级子节点连线核心代码 定义节点配置 functio…

10.接口自动化测试学习-Pytest框架(2)

1.mark标签 如果在每一个模块&#xff0c;每一个类&#xff0c;每一个方法和用例之前都加上mark标签&#xff0c;那么在pytest运行时就可以只运行带有该mark标签的模块、类、接口。 这样可以方便我们执行自动化时&#xff0c;自主选择执行全部用例、某个模块用例、某个流程用…

区块链技术与应用学习笔记(10-11节)——北大肖臻课程

目录 10.分岔 ①什么是分叉&#xff1f; ②导致分叉的原因&#xff1f; ③在比特币新共识规则发布会会导致什么分叉&#xff1f; 什么是硬分叉&#xff1f; 硬分叉例子&#xff1f; 什么是软分叉&#xff1f; 软分叉和硬分叉区别&#xff1f; 软分叉实例 11.问答 转…

茴香豆:搭建你的RAG智能助理-作业三

本次课程由书生浦语社区贡献者【北辰】老师讲解【茴香豆&#xff1a;搭建你的 RAG 智能助理】课程。分别是&#xff1a; RAG 基础介绍茴香豆产品简介使用茴香豆搭建RAG知识库实战 课程视频&#xff1a;https://www.bilibili.com/video/BV1QA4m1F7t4/ 课程文档&#xff1a;ht…

Scala的函数至简原则

对于scala语言来说&#xff0c;函数的至简原则是它的一大特色。下面让我们一起来看看分别有什么吧&#xff01; 函数至简原则&#xff1a;能省则省&#xff01; 初始函数 def test(name:String):String{return name }1、return可以省略&#xff0c;Scala会使用函数体的最后一…

Docker in Docker的原理与实战

Docker in Docker&#xff08;简称DinD&#xff09;是一种在Docker容器内部运行另一个Docker实例的技术。这种技术允许用户在一个隔离的Docker容器中创建、管理和运行其他Docker容器&#xff0c;从而提供了更灵活和可控的部署选项。以下是DinD的主要特点&#xff1a; 隔离性&am…

Linux下载及安装OpenSSL

文章目录 前言一、OpenSSL下载二、OpenSSL安装1.上传下载好的安装包到服务器2.解压3.切换目录4.配置config5.编译6.安装7.备份旧版本OpenSSL7.创建软链接8.添加OpenSSL动态链接库9.更新库缓存10.查看OpenSSL版本验证安装是否成功 前言 一般系统会自带有OpenSSL&#xff0c;我们…

ssm和springboot项目运行与部署

java项目可以打成jar包或者war包&#xff0c;以前SSM前后端不分离的项目&#xff0c;一般都是打成war包&#xff0c;现在前后端分离springboot项目&#xff0c;一般都是打成jar包&#xff0c;当然前后端分离springboot项目打成war包也可以。 总结&#xff1a; ssm项目 前后端分…

详细解析什么是期权交易的获利方法

期权交易的获利方法 在期权交易之前进行充分的准备工作和风险评估是至关重要的。其中行情结构、策略方法、预期收益和风险评估&#xff0c;是期权交易成功的关键要素。它们能帮助我们更好地制定交易计划&#xff0c;控制风险&#xff0c;并追求稳定的利润。以下是对这四点的详…

SpringBoot+MyBatis-Plus+jsqlparser实现多租户功能

前言 多租户技术&#xff08;multi-tenancy technology&#xff09;是一种软件架构技术&#xff0c;它允许在单个系统实例上为多个用户或组织提供服务&#xff0c;同时确保这些用户之间数据的隔离性。在多租户架构中&#xff0c;每个租户&#xff08;可以是个人用户、企业、组…