<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 */
}
效果如下图:圆形和直线
对角线