feat: pure-table添加动态表头示例

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

@@ -6,11 +6,7 @@ const { columns, dataList, exportExcel } = useColumns();
 
 <template>
   <div>
-    <el-button
+    <el-button type="primary" class="mb-[20px]" @click="exportExcel">
-      type="primary"
-      class="mb-[20px] float-right"
-      @click="exportExcel"
-    >
       导出
     </el-button>
     <pure-table row-key="id" border :data="dataList" :columns="columns" />

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
+  };
+}

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>

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"),

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" 鼠标经过行时，去掉行的背景色 -->