feat: 新增 @pureadmin/table 水印示例

src/views/pure-table/high/edit/columns.tsx

@@ -17,7 +17,7 @@ export function useColumns() {
 
   const columns: TableColumnList = [
     {
-      label: "ID",
+      label: "ID（可编辑）",
       prop: "id",
       // class="flex-bc" flex-bc 代表 flex justify-between items-center 具体看 src/style/tailwind.css 文件
       cellRenderer: ({ row, index }) => (

src/views/pure-table/high/list.tsx

@@ -3,6 +3,7 @@ import ColumnDrag from "./drag/column/index.vue";
 import Contextmenu from "./contextmenu/index.vue";
 import Execl from "./execl/index.vue";
 import Edit from "./edit/index.vue";
+import Watermark from "./watermark/index.vue";
 
 const rendContent = (val: string) =>
   `代码位置：src/views/pure-table/high/${val}/index.vue`;
@@ -37,5 +38,11 @@ export const list = [
     content: rendContent("edit"),
     title: "单元格编辑",
     component: Edit
+  },
+  {
+    key: "watermark",
+    content: rendContent("watermark"),
+    title: "表格水印",
+    component: Watermark
   }
 ];

src/views/pure-table/high/watermark/columns.tsx

@@ -0,0 +1,46 @@
+import { tableDataEdit } from "../data";
+import { ref, onMounted, type Ref } from "vue";
+import { clone, useWatermark, delay } from "@pureadmin/utils";
+
+export function useColumns(waterRef: Ref) {
+  const dataList = ref(clone(tableDataEdit, true));
+
+  const columns: TableColumnList = [
+    {
+      label: "ID",
+      prop: "id"
+    },
+    {
+      label: "日期",
+      prop: "date"
+    },
+    {
+      label: "姓名",
+      prop: "name"
+    },
+    {
+      label: "地址",
+      prop: "address"
+    }
+  ];
+
+  onMounted(() => {
+    delay().then(() => {
+      const { setWatermark } = useWatermark(
+        waterRef.value.getTableRef().$refs.tableWrapper
+      );
+      setWatermark("编程即艺术", {
+        font: "16px Microsoft YaHei",
+        globalAlpha: 0.8,
+        forever: true,
+        width: 252,
+        height: 80
+      });
+    });
+  });
+
+  return {
+    columns,
+    dataList
+  };
+}

src/views/pure-table/high/watermark/index.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useColumns } from "./columns";
+
+const waterRef = ref();
+const { columns, dataList } = useColumns(waterRef);
+</script>
+
+<template>
+  <pure-table
+    ref="waterRef"
+    row-key="id"
+    border
+    :data="dataList"
+    :columns="columns"
+  />
+</template>