在el-table单元格中通过div绘制圆、直线和对角线

news2024/9/23 15:33:26
<el-table-column label="电源屏零层端子" align="center" prop="name2" width="220px">
          <template #default="scope">
            <div class="bigCircle"></div>
            <div class="smallCircle"></div>
            <div class="cell-line-right"></div>
          </template>
        </el-table-column>
        
<el-table-column label="设备名称/架位" align="center">
          <template #header>
            <div>
              <span>设备名称</span><br>
              <div class="cell-diagonal-line"></div>
              <span>架位</span>
            </div>
          </template>
          <el-table-column prop="name1" align="center"></el-table-column>
          <el-table-column prop="name2" align="center"></el-table-column>
        </el-table-column>
.bigCircle, .smallCircle {
  position: absolute; /* 使用绝对定位 */
  top: 50%; /* 将圆的垂直位置设置为父元素中心 */
  left: 50%; /* 将圆的水平位置设置为父元素中心 */
}
/*大圆*/
.bigCircle {
  width: 30px; /* 大圆的直径 */
  height: 30px; /* 大圆的直径 */
  border: 1px solid red; /* 大圆边框 */
  border-radius: 50%; /* 大圆变为圆形 */
  background-color: transparent; /* 大圆背景透明 */
  transform: translate(-50%, -50%); /* 调整大圆的位置,使其圆心对齐 */
}
/*小圆*/
.smallCircle {
  width: 15px; /* 小圆的直径 */
  height: 15px; /* 小圆的直径 */
  border: 1px solid red; /* 小圆边框 */
  border-radius: 50%; /* 小圆变为圆形 */
  background-color: transparent; /* 小圆背景透明 */
  transform: translate(-50%, -50%); /* 调整小圆的位置,使其圆心对齐 */
}
/*直线*/
.cell-line {
  position: absolute;
  left: 0; /* 从单元格的左边框开始 */
  width: calc(100% + 2px); /* 设置宽度为单元格宽度加上两边边框的宽度 */
  height: 1px; /* 线条高度 */
  background-color: #00fd01; /* 线条颜色 */
  top: 50%; /* 将线条垂直居中于单元格 */
  transform: translateY(-50%); /* 确保线条垂直居中 */
}
/*右半直线*/
.cell-line-right {
  position: absolute;
  right: 0; /* 从单元格的右边框开始 */
  width: 50%; /* 线条长度为单元格宽度的一半 */
  height: 1px; /* 线条高度 */
  background-color: #00fd01; /* 线条颜色 */
  top: 50%; /* 将线条垂直居中于单元格 */
  transform: translateY(-50%); /* 将线条从右边框向左移动一半的宽度 */
}
/*左半直线*/
.cell-line-left {
  position: absolute;
  left: 0; /* 从单元格的左边框开始 */
  width: 50%; /* 线条长度为单元格宽度的一半 */
  height: 1px; /* 线条高度 */
  background-color: #00fd01; /* 线条颜色 */
  top: 50%; /* 将线条垂直居中于单元格 */
  transform: translateY(-50%); /* 将线条垂直居中 */
}
/*圆旁边的文字*/
.cell-text {
  position: absolute;
  top: 20%;
  transform: translate(120%, -50%);
}
/*对角线*/
.cell-diagonal-line {
  position: absolute;
  top: 14%; /* 定位到父元素高度的中间 */
  left: 13%; /* 定位到父元素宽度的中间 */
  width: 180%; /* 宽度设置为父元素宽度 */
  height: 1px; /* 高度为1px,即线的粗细 */
  background-color: white; /* 线的颜色 */
  transform: translate(-50%, -50%) rotate(14deg); /* 旋转并居中 */
  transform-origin: center; /* 旋转的原点在中心 */
}

/* 确保表头有足够的尺寸来容纳斜线和文本 */
.el-table .el-table__header-wrapper th {
  padding: 10px 0; /* 增加垂直方向的padding */
}

效果如下图:圆形和直线
在这里插入图片描述
对角线
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

EtherNet/IP转Profinet协议网关(经典配置案例)

怎么样才能把EtherNet/IP和Profinet网络连接起来呢?这几天有几个朋友问到了这个问题&#xff0c;作者在这里统一为大家详细说明一下。其实有一个设备可以很轻松地解决这个问题&#xff0c;名为JM-PN-EIP&#xff0c;下面是详细介绍。 一&#xff0c;设备主要功能 1、捷米特J…

eqmx上读取数据处理以后添加到数据库中

目录 定义一些静态变量 定时器事件的处理器 订阅数据的执行器 处理json格式数据和将处理好的数据添加到数据库中 要求和最终效果 总结一下 定义一些静态变量 // 在这里都定义成全局的 一般都定义成静态的private static MqttClient mqttClient; // mqtt客户端 private s…

科研绘图系列:R语言组合堆积图(stacked barplot with multiple groups)

介绍 通常堆积图的X轴表示样本,样本可能会存在较多的分组信息,通过组合堆积图和样本标签分组信息,我们可以得到一张能展示更多信息的可发表图形。 加载R包 knitr::opts_chunk$set(warning = F, message = F) library(tidyverse) library(cowplot) library(patchwork)导入…

R包:plot1cell单细胞可视化包

介绍 plot1cell是用于单细胞数据seurat数据对象的可视化包。 安装 ## You might need to install the dependencies below if they are not available in your R library. bioc.packages <- c("biomaRt","GenomeInfoDb","EnsDb.Hsapiens.v86&qu…

基于飞腾FT2000的嵌入式计算机系统

作为中国嵌入式计算机的领导厂家&#xff0c;是最早进入轨道交通领域的 工业级AFC嵌入式计算机系列产品&#xff0c;充分体现了轨道交通新一代AFC主流新技术的各种特点&#xff0c;为轨道交通AFC系统的升级换代提供了良好的系统平台。 标准化 采用开放式架构的Intel新一代主流…

力扣高频SQL 50题(基础版)第八题

文章目录 力扣高频SQL 50题&#xff08;基础版&#xff09;第八题1581. 进店却未进行过交易的顾客题目说明思路分析实现过程准备数据&#xff1a;实现方式&#xff1a;结果截图&#xff1a;总结&#xff1a; 力扣高频SQL 50题&#xff08;基础版&#xff09;第八题 1581. 进店…

操作系统杂项(十)

目录 一、简述socket中select、epoll的使用场景和区别 1、使用场景 2、区别 二、epoll水平触发和边缘触发的区别 三、简述Reactor和Proactor模式 1、Reactor 2、Proactor 3、区别 四、简述同步和异步的区别&#xff0c;阻塞和非阻塞的区别 1、同步与异步 2、阻塞与非…

SpringBoot入门:如何新建SpringBoot项目(保姆级教程)

在本文中&#xff0c;我们将演示如何新建一个基本的 Spring Boot 项目。写这篇文章的时候我还是很惊讶的&#xff0c;因为我发现有些java的初学者&#xff0c;甚至工作10年的老员工居然并不会新建一个SpringBoot项目&#xff0c;所以特别出了一篇文章来教大家新建一个SpringBoo…

状态机 XState 使用

状态机 一般指的是有限状态机&#xff08;Finite State Machine&#xff0c;FSM&#xff09;&#xff0c;又可以称为有限状态自动机&#xff08;Finite State Automation&#xff0c;FSA&#xff09;&#xff0c;简称状态机&#xff0c;它是一个数学模型&#xff0c;表示有限个…

Java链接elasticsearch8.14.1

项目需求&#xff0c;需要实现海量数据的聚合、查询。因为职业生涯开发使用springboot微服务架构、Java开发的方式&#xff0c;所以&#xff0c;项目前期准备了elasticsearch、kibana、logstash的集群环境&#xff0c;作为服务端&#xff0c;用于数据的收集、存储&#xff1b;但…

masscan 端口扫描——(Golang 简单使用总结)

1. 前言 最近要做一个扫描 ip 端口的功能 扫描的工具有很多&#xff0c;但是如何做到短时间扫描大量的 ip 是个相对困难的事情。 市场上比较出名的工具有 masscan和nmap masscan 支持异步扫描&#xff0c;对多线程的利用很好&#xff0c;同时仅仅支持 syn 半开扫描&#xff…

Emacs之解决无法输入中文问题(一百四十八)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 新书发布&#xff1a;《Android系统多媒体进阶实战》&#x1f680; 优质专栏&#xff1a; Audio工程师进阶系列…

研究生选择学习Android开发的利与弊?

在开始前刚好我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「Android的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01;产品经理可以学学Axure快…

ForCloud赢战攻防 无惧突发0day漏洞 ForCloud虚实结合快速处置

攻防演练前夕&#xff0c;亚信安全威胁情报中心监测到一个存在于Nacos Derby中的0day漏洞&#xff0c;漏洞利用代码为公开状态&#xff0c;攻击者利用此漏洞可在目标服务器上执行任意代码。 造成的破坏程度&#xff1f;你可能正在使用&#xff01; Nacos&#xff08;Dynamic …

【React】事件绑定:深入解析高效处理用户交互的最佳实践

文章目录 一、什么是事件绑定&#xff1f;二、基本事件绑定三、绑定 this 上下文四、传递参数五、事件对象六、事件委托七、常见事件处理八、优化事件处理 React 是现代前端开发中最受欢迎的框架之一&#xff0c;其组件化和高效的状态管理能力使得构建复杂的用户界面变得更加容…

Java成为最适合中国人体质编程语言的缘由

在开始前刚好我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「java的资料从专业入门到高级教程」&#xff0c;点个关注在评论区回复“666”之后私信回复“666”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01; 语言的流行度Java在中国的普及…

被工信部认可的开源软件治理解决方案

近日&#xff0c;工信部网络安全产业发展中心正式发布了“2023年信息技术应用创新解决方案”&#xff0c;开源网安凭借“基于SCA技术开源软件治理解决方案”顺利入选&#xff0c;成为经工信部认可的优秀解决方案&#xff0c;这是开源网安连续两届荣获此荣誉。 工业和信息化部网…

线性表的链式存储结构————循环链表(java)

线性表的链式存储结构————循环链表&#xff08;java&#xff09; 文章目录 线性表的链式存储结构————循环链表&#xff08;java&#xff09;什么是循环链表循环链表的实现结语 嗨&#xff01;收到一张超级美丽的风景图&#xff0c;愿你每天都能顺心&#xff01; 什么是…

【Django】anaconda环境变量配置及配置python虚拟环境

文章目录 配置环境变量配置python虚拟环境查看conda源并配置国内源在虚拟环境中安装django 配置环境变量 control sysdm.cpl,,3笔者anaconda安装目录为C:\ProgramData\anaconda3 那么需要加入path中的有如下三个 C:\ProgramData\anaconda3 C:\ProgramData\anaconda3\Scripts C:…

由bext安装“异常”引出的话题:windows上转义字符的工作原理

由bext安装“异常”引出的话题&#xff1a;Windows上转义字符的工作原理&#xff0c;与ai“闲扯”不经意学习知识点。 (笔记模板由python脚本于2024年07月25日 19:21:13创建&#xff0c;本篇笔记适合喜欢用ai学习的coder翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff…