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