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

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

@@ -4,6 +4,7 @@ import Contextmenu from "./contextmenu/index.vue";
 import Execl from "./execl/index.vue";
 import Edit from "./edit/index.vue";
 import Watermark from "./watermark/index.vue";
+import Print from "./prints/index.vue";
 
 const rendContent = (val: string) =>
   `代码位置：src/views/pure-table/high/${val}/index.vue`;
@@ -42,7 +43,13 @@ export const list = [
   {
     key: "watermark",
     content: rendContent("watermark"),
-    title: "表格水印",
+    title: "水印",
     component: Watermark
+  },
+  {
+    key: "print",
+    content: rendContent("print"),
+    title: "打印",
+    component: Print
   }
 ];

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

@@ -0,0 +1,50 @@
+import Print from "@/utils/print";
+import { ref, type Ref } from "vue";
+import { tableDataEdit } from "../data";
+import { clone } from "@pureadmin/utils";
+
+export function useColumns(printRef: Ref) {
+  const dataList = ref(clone(tableDataEdit, true));
+
+  const columns: TableColumnList = [
+    {
+      label: "ID",
+      prop: "id"
+    },
+    {
+      label: "日期",
+      prop: "date"
+    },
+    {
+      label: "姓名",
+      prop: "name"
+    },
+    {
+      label: "地址",
+      prop: "address"
+    }
+  ];
+
+  const print = () => {
+    Print(printRef.value.getTableRef().$refs.tableWrapper).toPrint;
+  };
+
+  function headerCellStyle({ columnIndex }) {
+    return columnIndex === 0
+      ? { background: "#f3b2d0" }
+      : { background: "#fafafa" };
+  }
+  function rowStyle({ rowIndex }) {
+    return rowIndex % 2 === 1
+      ? { background: "#ffa39e" }
+      : { background: "#91d5ff" };
+  }
+
+  return {
+    columns,
+    dataList,
+    print,
+    headerCellStyle,
+    rowStyle
+  };
+}

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useColumns } from "./columns";
+
+const printRef = ref();
+const { columns, dataList, print, rowStyle, headerCellStyle } =
+  useColumns(printRef);
+</script>
+
+<template>
+  <div>
+    <el-button type="primary" @click="print" class="mb-[20px] float-right">
+      打印
+    </el-button>
+    <pure-table
+      ref="printRef"
+      row-key="id"
+      border
+      :data="dataList"
+      :columns="columns"
+      :row-style="rowStyle"
+      :header-cell-style="headerCellStyle"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+// 去掉鼠标悬停行背景色
+:deep(.el-table) {
+  tbody tr:hover > td {
+    background-color: transparent !important;
+  }
+}
+</style>