feat: 添加虚拟表格示例 (#1007)

* feat: 添加虚拟表格示例

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

@@ -0,0 +1,60 @@
+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.getTableDoms().tableWrapper).toPrint;
+  };
+
+  function cellStyle({ column: { property }, rowIndex }) {
+    if (property === "id") {
+      return rowIndex < 3
+        ? { background: "#87baf9" }
+        : { background: "#87e8de" };
+    }
+  }
+
+  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,
+    rowStyle,
+    cellStyle,
+    headerCellStyle
+  };
+}

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

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useColumns } from "./columns";
+
+const printRef = ref();
+const { columns, dataList, print, cellStyle, rowStyle, headerCellStyle } =
+  useColumns(printRef);
+</script>
+
+<template>
+  <div>
+    <el-button type="primary" class="mb-[20px] float-right" @click="print">
+      打印
+    </el-button>
+    <!-- rowHoverBgColor="transparent" 鼠标经过行时，去掉行的背景色 -->
+    <pure-table
+      ref="printRef"
+      rowHoverBgColor="transparent"
+      row-key="id"
+      border
+      :data="dataList"
+      :columns="columns"
+      :row-style="rowStyle"
+      :cell-style="cellStyle"
+      :header-cell-style="headerCellStyle"
+    />
+  </div>
+</template>