当前位置: 首页> 文旅> 酒店 > 在el-table单元格中通过div绘制圆、直线和对角线

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

时间:2025/7/11 14:26:39来源:https://blog.csdn.net/weixin_44758923/article/details/140721267 浏览次数:0次
<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 */
}

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

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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: