feat: pure-table添加headerSlot自定义表头插槽用法示例

src/views/system/menu/form.vue

@@ -26,7 +26,7 @@ const props = withDefaults(defineProps<FormProps>(), {
     path: "",
     component: "",
     rank: 99,
-    redirect: " ",
+    redirect: "",
     icon: "",
     extraIcon: "",
     enterTransition: "",

src/views/system/menu/index.vue

@@ -61,7 +61,7 @@ const {
     </el-form>
 
     <PureTableBar
-      title="菜单管理（初版，持续完善中）"
+      title="菜单管理（仅演示，操作后不生效）"
       :columns="columns"
       :isExpandAll="false"
       :tableRef="tableRef?.getTableRef()"

src/views/table/base/header-renderer/columns.tsx

@@ -2,7 +2,6 @@ import { message } from "@/utils/message";
 import { tableData } from "../data";
 import { ref, computed } from "vue";
 
-// 如果您不习惯tsx写法，可以传slot，然后在template里写
 // 需是hooks写法（函数中有return），避免失去响应性
 export function useColumns() {
   const search = ref("");
@@ -26,8 +25,9 @@ export function useColumns() {
 
   const columns: TableColumnList = [
     {
-      label: "日期",
-      prop: "date"
+      prop: "date",
+      // 自定义表头，slot用法  #nameHeader="{ column, $index }"
+      headerSlot: "nameHeader"
     },
     {
       label: "姓名",
@@ -39,7 +39,7 @@ export function useColumns() {
     },
     {
       align: "right",
-      // 自定义表头
+      // 自定义表头，tsx用法
       headerRenderer: () => (
         <el-input
           v-model={search.value}

src/views/table/base/header-renderer/index.vue

@@ -1,9 +1,17 @@
 <script setup lang="ts">
 import { useColumns } from "./columns";
+import Calendar from "@iconify-icons/ri/calendar-2-line";
 
 const { columns, filterTableData } = useColumns();
 </script>
 
 <template>
-  <pure-table :data="filterTableData" :columns="columns" />
+  <pure-table :data="filterTableData" :columns="columns">
+    <template #nameHeader>
+      <span class="flex items-center">
+        <IconifyIconOffline :icon="Calendar" />
+        日期
+      </span>
+    </template>
+  </pure-table>
 </template>