From 0004f1318c2e3372e71394ede14a3181aa90da1d Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Mon, 23 Sep 2024 14:45:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20`pure-table`=E6=B7=BB=E5=8A=A0=E5=8A=A8?=
 =?UTF-8?q?=E6=80=81=E8=A1=A8=E5=A4=B4=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/table/high/excel/index.vue    |  6 +--
 src/views/table/high/header/columns.tsx | 57 +++++++++++++++++++++++++
 src/views/table/high/header/index.vue   | 25 +++++++++++
 src/views/table/high/list.tsx           |  7 +++
 src/views/table/high/prints/index.vue   |  2 +-
 5 files changed, 91 insertions(+), 6 deletions(-)
 create mode 100644 src/views/table/high/header/columns.tsx
 create mode 100644 src/views/table/high/header/index.vue

diff --git a/src/views/table/high/excel/index.vue b/src/views/table/high/excel/index.vue
index 67fcce8607..7094754a71 100644
--- a/src/views/table/high/excel/index.vue
+++ b/src/views/table/high/excel/index.vue
@@ -6,11 +6,7 @@ const { columns, dataList, exportExcel } = useColumns();
 
 <template>
   <div>
-    <el-button
-      type="primary"
-      class="mb-[20px] float-right"
-      @click="exportExcel"
-    >
+    <el-button type="primary" class="mb-[20px]" @click="exportExcel">
       导出
     </el-button>
     <pure-table row-key="id" border :data="dataList" :columns="columns" />
diff --git a/src/views/table/high/header/columns.tsx b/src/views/table/high/header/columns.tsx
new file mode 100644
index 0000000000..011014b7f5
--- /dev/null
+++ b/src/views/table/high/header/columns.tsx
@@ -0,0 +1,57 @@
+import { tableData } from "../data";
+import { ref, onMounted } from "vue";
+import { clone, delay } from "@pureadmin/utils";
+
+export function useColumns() {
+  const dataList = ref([]);
+  const columns = ref<TableColumnList>([
+    {
+      label: "日期",
+      prop: "date"
+    },
+    {
+      label: "姓名",
+      prop: "name"
+    },
+    {
+      label: "地址",
+      prop: "address"
+    }
+  ]);
+
+  function onChange() {
+    // 动态表头只需给 columns.value 重新赋值即可，如下
+    columns.value = [
+      {
+        label: "日期" + Math.round(Math.random() * 99),
+        prop: "date"
+      },
+      {
+        label: Math.round(Math.random() * 99) + "姓名",
+        prop: "name"
+      },
+      {
+        label: "地址",
+        prop: "address"
+      }
+    ];
+  }
+
+  onMounted(() => {
+    delay(600).then(() => {
+      const newList = [];
+      Array.from({ length: 6 }).forEach(() => {
+        newList.push(clone(tableData, true));
+      });
+      newList.flat(Infinity).forEach((item, index) => {
+        dataList.value.push({ id: index, ...item });
+      });
+    });
+  });
+
+  return {
+    columns,
+    dataList,
+    onChange
+  };
+}
diff --git a/src/views/table/high/header/index.vue b/src/views/table/high/header/index.vue
new file mode 100644
index 0000000000..8352d433c3
--- /dev/null
+++ b/src/views/table/high/header/index.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useColumns } from "./columns";
+
+const tableRef = ref();
+
+const { columns, dataList, onChange } = useColumns();
+</script>
+
+<template>
+  <div>
+    <el-button type="primary" class="mb-[20px]" @click="onChange">
+      切换表头
+    </el-button>
+    <pure-table
+      ref="tableRef"
+      border
+      row-key="id"
+      alignWhole="center"
+      showOverflowTooltip
+      :data="dataList"
+      :columns="columns"
+    />
+  </div>
+</template>
diff --git a/src/views/table/high/list.tsx b/src/views/table/high/list.tsx
index d0b6c19dc3..df0612bd7d 100644
--- a/src/views/table/high/list.tsx
+++ b/src/views/table/high/list.tsx
@@ -1,5 +1,6 @@
 import Adaptive from "./adaptive/index.vue";
 import Page from "./page/index.vue";
+import Header from "./header/index.vue";
 import RowDrag from "./drag/row/index.vue";
 import ColumnDrag from "./drag/column/index.vue";
 import Contextmenu from "./contextmenu/index.vue";
@@ -25,6 +26,12 @@ export const list = [
     title: "分页、加载动画、动态列",
     component: Page
   },
+  {
+    key: "header",
+    content: rendContent("header"),
+    title: "动态表头",
+    component: Header
+  },
   {
     key: "tableSelect",
     content: rendContent("table-select"),
diff --git a/src/views/table/high/prints/index.vue b/src/views/table/high/prints/index.vue
index 8c3b44db79..c67e089673 100644
--- a/src/views/table/high/prints/index.vue
+++ b/src/views/table/high/prints/index.vue
@@ -9,7 +9,7 @@ const { columns, dataList, print, cellStyle, rowStyle, headerCellStyle } =
 
 <template>
   <div>
-    <el-button type="primary" class="mb-[20px] float-right" @click="print">
+    <el-button type="primary" class="mb-[20px]" @click="print">
       打印
     </el-button>
     <!-- rowHoverBgColor="transparent" 鼠标经过行时，去掉行的背景色 -->