vue el-table 使用canvas绘制水印，同时添加安全措施，禁止用户去掉水印

在 Vue 的 el-table 中使用 canvas 绘制水印，可以通过以下步骤实现：

1. 在 Vue 组件中引入一个 canvas 标签，并设置其样式为绝对定位，并且设置 z-index 为比 el-table 的 z-index 更高，这样可以保证水印在表格上方。

2. 在 mounted 钩子函数中，获取到 canvas 对象，并使用 canvas 的绘图 API 绘制水印。

3. 添加安全措施，可以在绘制水印时，使用一个图层将水印覆盖在表格上方，并设置该图层为不可选中和不可编辑，这样就可以防止用户去掉水印。

以下是示例代码：

<template>
  <div class="table-container">
    <canvas ref="watermark" class="watermark-canvas"></canvas>
    <el-table :data="tableData" class="table" :style="{position: 'relative'}">
      <!-- 表格内容 -->
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // 表格数据
      ],
    };
  },
  mounted() {
    this.drawWatermark();
  },
  methods: {
    drawWatermark() {
      const canvas = this.$refs.watermark;
      const ctx = canvas.getContext('2d');

      // 设置 canvas 样式
      canvas.style.position = 'absolute';
      canvas.style.top = '0';
      canvas.style.left = '0';
      canvas.style.zIndex = '999';

      // 绘制水印
      ctx.font = '20px Arial';
      ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
      ctx.rotate(-Math.PI / 4);
      ctx.fillText('Watermark', -canvas.height / 2, canvas.width / 2);

      // 添加安全措施
      const wrapper = document.createElement('div');
      wrapper.style.position = 'absolute';
      wrapper.style.top = '0';
      wrapper.style.left = '0';
      wrapper.style.zIndex = '1000';
      wrapper.style.pointerEvents = 'none'; // 禁止鼠标事件
      wrapper.appendChild(canvas);
      this.$el.appendChild(wrapper);
    },
  },
};
</script>

<style>
.table-container {
  position: relative;
}
.table {
  position: relative;
  z-index: 1;
}
.watermark-canvas {
  width: 100%;
  height: 100%;
}
</style>