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

<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 */
}

效果如下图：圆形和直线

对角线