用canvas给el-table的表头加斜线

要实现的效果如图

百度到的方法基本是在mounted后，给表头元素加子/伪元素，设置旋转样式实现

这种方法适用于表头高度固定的情况

如果表头高度不定，那就要动态计算旋转角度，颇麻烦，所以选择用canvas

HTML部分

        <el-table-column  prop="reportDate" label="日期" >
          <template #header>
            <div class="group-bias-divide" id="bias">
              <div class="top">指标限值</div>
              <div class="bottom">日期</div>
            </div>
          </template>
        </el-table-column>

JS部分

//` 日期和检测数据间加斜线
function addBias() {
  //. 获取group-bias-divide的dom
  const groupBiasDivide = document.querySelector('#bias');
  //. 获取其父元素的父元素
  const parent = groupBiasDivide.parentElement.parentElement;
  let canvas = parent.querySelector('canvas');
  //. 如果canvas存在，删除
  if (!canvas) {
    canvas = document.createElement('canvas');
    parent.appendChild(canvas);
  }

  //. 创建一个canvas元素，宽高度和父元素一样
  //. parent设置相对定位，canvas设置绝对定位，top和left都为0
  parent.style.position = 'relative';
  canvas.style.position = 'absolute';
  canvas.style.top = 0;
  canvas.style.left = 0;
  canvas.style.width = '100%';
  canvas.style.height = '100%';
  //. 从canvas的左上角到右下角画一条宽为5px白色的斜线
  const ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineWidth = 2;
  ctx.strokeStyle = '#fff';
  ctx.lineTo(canvas.width, canvas.height);
  ctx.stroke();
}

带comment样式：

CSS部分 用于设置左下和右上

:deep(.group-bias-divide) {
  .top {
    text-align: right;
    box-sizing: border-box;
  }
  .bottom {
    box-sizing: border-box;
    text-align: left;
  }
}