feat: add ample demos to @pureadmin/table (#379)

* feat: add ample demos to @pureadmin/table
2025-06-04 07:27:41 +08:00 · 2022-11-21 11:42:33 +08:00 · 2022-11-21 11:42:33 +08:00 · 9b62d6ef1e
commit 9b62d6ef1e
parent 8ff242ea45
46 changed files with 1859 additions and 48 deletions
--- a/mock/asyncRoutes.ts
+++ b/mock/asyncRoutes.ts
@ -89,7 +89,7 @@ const frameRouter = {
  meta: {
    icon: "monitor",
    title: "menus.hsExternalPage",
-    rank: 7
+    rank: 8
  },
  children: [
    {
--- a/package.json
+++ b/package.json
@ -34,8 +34,8 @@
    "@logicflow/extension": "^1.1.30",
    "@pureadmin/components": "^1.1.0",
    "@pureadmin/descriptions": "^1.1.0",
-    "@pureadmin/table": "^1.2.0",
-    "@pureadmin/utils": "^1.6.5",
+    "@pureadmin/table": "^1.6.0",
+    "@pureadmin/utils": "^1.6.6",
    "@vueuse/core": "^9.5.0",
    "@vueuse/motion": "2.0.0-beta.12",
    "@wangeditor/editor": "^5.1.21",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -20,9 +20,9 @@ specifiers:
  "@logicflow/extension": ^1.1.30
  "@pureadmin/components": ^1.1.0
  "@pureadmin/descriptions": ^1.1.0
-  "@pureadmin/table": ^1.2.0
+  "@pureadmin/table": ^1.6.0
  "@pureadmin/theme": ^2.4.0
-  "@pureadmin/utils": ^1.6.5
+  "@pureadmin/utils": ^1.6.6
  "@types/element-resize-detector": 1.1.3
  "@types/intro.js": ^5.1.0
  "@types/js-cookie": ^3.0.1
@ -132,7 +132,7 @@ dependencies:
  "@logicflow/extension": 1.1.31
  "@pureadmin/components": 1.1.0_vue@3.2.45
  "@pureadmin/descriptions": 1.1.1_element-plus@2.2.22
-  "@pureadmin/table": 1.2.0_element-plus@2.2.22
+  "@pureadmin/table": 1.6.0_element-plus@2.2.22
  "@pureadmin/utils": 1.6.6_aotapuqn7htzdjltsyimavekky
  "@vueuse/core": 9.5.0_vue@3.2.45
  "@vueuse/motion": 2.0.0-beta.12_vue@3.2.45
@ -1379,10 +1379,10 @@ packages:
      vue: 3.2.45
    dev: false

-  /@pureadmin/table/1.2.0_element-plus@2.2.22:
+  /@pureadmin/table/1.6.0_element-plus@2.2.22:
    resolution:
      {
-        integrity: sha512-mJBpMj0YkaqTM5TDz+ek/f8h74qRLhDc/gLJhBq0wpyfCgG++Jd/9i+QUj8gedA5oN8IL6LOSFbcvlGDYxHgkw==
+        integrity: sha512-ryTZbfkNT/PTUS6pdrq7vuHr3f74lXs6kgRHaAPz64iTZmzaeVzf27TPakf4YDEcnQ/Gw6RqlQzE71W9m+P48w==
      }
    peerDependencies:
      element-plus: ^2.0.0
--- a/src/layout/components/panel/index.vue
+++ b/src/layout/components/panel/index.vue
@ -21,7 +21,7 @@ emitter.on("openPanel", () => {
    <div ref="target" class="right-panel bg-bg_color">
      <div class="right-panel-items">
        <div class="project-configuration">
-          <h3 class="dark:text-white">项目配置</h3>
+          <h4 class="dark:text-white">项目配置</h4>
          <span title="关闭配置">
            <IconifyIconOffline
              class="dark:text-white"
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -33,6 +33,7 @@ import pptRouter from "./modules/ppt";
 import homeRouter from "./modules/home";
 import ableRouter from "./modules/able";
 import listRouter from "./modules/list";
+import tableRouter from "./modules/table";
 import aboutRouter from "./modules/about";
 import errorRouter from "./modules/error";
 import guideRouter from "./modules/guide";
@ -50,6 +51,7 @@ const routes = [
  homeRouter,
  ableRouter,
  listRouter,
+  tableRouter,
  aboutRouter,
  errorRouter,
  guideRouter,
--- a/src/router/modules/able.ts
+++ b/src/router/modules/able.ts
@ -7,7 +7,7 @@ const ableRouter: RouteConfigsTable = {
  meta: {
    icon: "ubuntu-fill",
    title: $t("menus.hsAble"),
-    rank: 4
+    rank: 5
  },
  children: [
    {
--- a/src/router/modules/components.ts
+++ b/src/router/modules/components.ts
@ -7,7 +7,7 @@ const componentsRouter: RouteConfigsTable = {
  meta: {
    icon: "menu",
    title: $t("menus.hscomponents"),
-    rank: 5
+    rank: 6
  },
  children: [
    {
--- a/src/router/modules/nested.ts
+++ b/src/router/modules/nested.ts
@ -7,7 +7,7 @@ const nestedRouter: RouteConfigsTable = {
  meta: {
    title: $t("menus.hsmenus"),
    icon: "histogram",
-    rank: 6
+    rank: 7
  },
  children: [
    {
--- a/src/router/modules/ppt.ts
+++ b/src/router/modules/ppt.ts
@ -17,11 +17,7 @@ const pptRouter: RouteConfigsTable = {
      meta: {
        title: "PPT",
        frameSrc: "https://pipipi-pikachu.github.io/PPTist/",
-        frameLoading: false,
-        extraIcon: {
-          svg: true,
-          name: "team-iconxinpin"
-        }
+        frameLoading: false
      }
    }
  ]
--- a/src/router/modules/table.ts
+++ b/src/router/modules/table.ts
@ -0,0 +1,27 @@
+import type { RouteConfigsTable } from "/#/index";
+
+const flowChartRouter: RouteConfigsTable = {
+  path: "/pure-table",
+  redirect: "/pure-table/index",
+  meta: {
+    icon: "mdi:table-large",
+    title: "pure-admin-table",
+    rank: 4
+  },
+  children: [
+    {
+      path: "/pure-table/index",
+      name: "PureTable",
+      component: () => import("@/views/pure-table/index.vue"),
+      meta: {
+        title: "pure-admin-table",
+        extraIcon: {
+          svg: true,
+          name: "team-iconxinpin"
+        }
+      }
+    }
+  ]
+};
+
+export default flowChartRouter;
--- a/src/style/reset.scss
+++ b/src/style/reset.scss
@ -44,16 +44,6 @@ abbr:where([title]) {
  text-decoration: underline dotted;
 }

-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-size: inherit;
-  font-weight: inherit;
-}
-
 a {
  color: inherit;
  text-decoration: inherit;
--- a/src/views/able/swiper.vue
+++ b/src/views/able/swiper.vue
@ -100,7 +100,7 @@ const swiperExample: any[] = [
    </template>
    <el-row :gutter="10">
      <el-col v-for="item in swiperExample" :key="item.id" :span="12">
-        <h3 class="py-[24px] text-[24px] font-bold">{{ item.label }}</h3>
+        <h6 class="py-[24px] text-[24px] font-bold">{{ item.label }}</h6>
        <swiper v-bind="item.options">
          <swiper-slide v-for="i in 5" :key="i">
            <div
--- a/src/views/components/selector/index.vue
+++ b/src/views/components/selector/index.vue
@ -39,7 +39,7 @@ const selectedVal = ({ left, right }): void => {
        @selectedVal="selectedVal"
        :disabled="item.disabled"
      />
-      <h4 v-if="!item.disabled">选中范围：{{ selectRange }}</h4>
+      <h4 class="mt-3" v-if="!item.disabled">选中范围：{{ selectRange }}</h4>
    </el-card>
  </div>
 </template>
--- a/src/views/pure-table/components/base.vue
+++ b/src/views/pure-table/components/base.vue
@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { tableData } from "./data";
+
+const columns: TableColumnList = [
+  {
+    label: "日期",
+    prop: "date"
+  },
+  {
+    label: "姓名",
+    prop: "name"
+  },
+  {
+    label: "地址",
+    prop: "address"
+  }
+];
+</script>
+
+<template>
+  <pure-table :data="tableData" :columns="columns" />
+</template>
--- a/src/views/pure-table/components/border.vue
+++ b/src/views/pure-table/components/border.vue
@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { tableData } from "./data";
+
+const columns: TableColumnList = [
+  {
+    label: "日期",
+    prop: "date"
+  },
+  {
+    label: "姓名",
+    prop: "name"
+  },
+  {
+    label: "地址",
+    prop: "address"
+  }
+];
+</script>
+
+<template>
+  <pure-table :data="tableData" :columns="columns" border />
+</template>
--- a/src/views/pure-table/components/column-template/columns.tsx
+++ b/src/views/pure-table/components/column-template/columns.tsx
@ -0,0 +1,70 @@
+import { message } from "@pureadmin/components";
+import { tableData } from "../data";
+
+// 如果您不习惯tsx写法，可以传slot，然后在template里写
+// 需是hooks写法（函数中有return），避免失去响应性
+export function useColumns() {
+  const columns: TableColumnList = [
+    {
+      label: "日期",
+      prop: "date",
+      cellRenderer: ({ row }) => (
+        <div style="display: flex; align-items: center">
+          <iconify-icon-online icon="ep:timer" />
+          <span style="margin-left: 10px">{row.date}</span>
+        </div>
+      )
+    },
+    {
+      label: "姓名",
+      prop: "name",
+      cellRenderer: ({ row }) => (
+        <el-popover effect="light" trigger="hover" placement="top" width="auto">
+          {{
+            default: () => (
+              <>
+                <div>name: {row.name}</div>
+                <div>address: {row.address}</div>
+              </>
+            ),
+            reference: () => <el-tag>{row.name}</el-tag>
+          }}
+        </el-popover>
+      )
+    },
+    {
+      label: "地址",
+      prop: "address"
+    },
+    {
+      label: "操作",
+      cellRenderer: ({ index, row }) => (
+        <>
+          <el-button size="small" onClick={() => handleEdit(index + 1, row)}>
+            Edit
+          </el-button>
+          <el-button
+            size="small"
+            type="danger"
+            onClick={() => handleDelete(index + 1, row)}
+          >
+            Delete
+          </el-button>
+        </>
+      )
+    }
+  ];
+
+  const handleEdit = (index: number, row) => {
+    message.success(`您编辑了第 ${index} 行，数据为：${JSON.stringify(row)}`);
+  };
+
+  const handleDelete = (index: number, row) => {
+    message.error(`您删除了第 ${index} 行，数据为：${JSON.stringify(row)}`);
+  };
+
+  return {
+    columns,
+    tableData
+  };
+}
--- a/src/views/pure-table/components/column-template/index.vue
+++ b/src/views/pure-table/components/column-template/index.vue
@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { useColumns } from "./columns";
+
+const { columns, tableData } = useColumns();
+</script>
+
+<template>
+  <pure-table :data="tableData" :columns="columns" />
+</template>
--- a/src/views/pure-table/components/customIndex.vue
+++ b/src/views/pure-table/components/customIndex.vue
@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { tableData } from "./data";
+
+const indexMethod = (index: number) => {
+  return index * 2;
+};
+
+const columns: TableColumnList = [
+  {
+    type: "index",
+    index: indexMethod
+  },
+  {
+    label: "日期",
+    prop: "date"
+  },
+  {
+    label: "姓名",
+    prop: "name"
+  },
+  {
+    label: "地址",
+    prop: "address"
+  }
+];
+</script>
+
+<template>
+  <pure-table :data="tableData" :columns="columns" />
+</template>
--- a/src/views/pure-table/components/data.ts
+++ b/src/views/pure-table/components/data.ts
@ -0,0 +1,285 @@
+import dayjs from "dayjs";
+import { clone } from "@pureadmin/utils";
+
+const date = dayjs(new Date()).format("YYYY-MM-DD");
+
+const tableData = [
+  {
+    date,
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date,
+    name: "Jack",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date,
+    name: "Dick",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date,
+    name: "Harry",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date,
+    name: "Sam",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date,
+    name: "Lucy",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date,
+    name: "Mary",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date,
+    name: "Mike",
+    address: "No. 189, Grove St, Los Angeles"
+  }
+];
+
+const cloneData = clone(tableData, true);
+
+const tableDataMore = cloneData.map(item =>
+  Object.assign(item, {
+    state: "California",
+    city: "Los Angeles",
+    "post-code": "CA 90036"
+  })
+);
+
+const tableDataSortable = cloneData.map((item, index) =>
+  Object.assign(item, {
+    date: `${dayjs(new Date()).format("YYYY-MM")}-${index + 1}`
+  })
+);
+
+const tableDataExpand = [
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    state: "California",
+    city: "San Francisco",
+    address: "3650 21st St, San Francisco",
+    zip: "CA 94114",
+    family: [
+      {
+        name: "Jerry",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Spike",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Tyke",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      }
+    ]
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    state: "California",
+    city: "San Francisco",
+    address: "3650 21st St, San Francisco",
+    zip: "CA 94114",
+    family: [
+      {
+        name: "Jerry",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Spike",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Tyke",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      }
+    ]
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    state: "California",
+    city: "San Francisco",
+    address: "3650 21st St, San Francisco",
+    zip: "CA 94114",
+    family: [
+      {
+        name: "Jerry",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Spike",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Tyke",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      }
+    ]
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    state: "California",
+    city: "San Francisco",
+    address: "3650 21st St, San Francisco",
+    zip: "CA 94114",
+    family: [
+      {
+        name: "Jerry",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Spike",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Tyke",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      }
+    ]
+  },
+  {
+    date: "2016-05-08",
+    name: "Tom",
+    state: "California",
+    city: "San Francisco",
+    address: "3650 21st St, San Francisco",
+    zip: "CA 94114",
+    family: [
+      {
+        name: "Jerry",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Spike",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Tyke",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      }
+    ]
+  },
+  {
+    date: "2016-05-06",
+    name: "Tom",
+    state: "California",
+    city: "San Francisco",
+    address: "3650 21st St, San Francisco",
+    zip: "CA 94114",
+    family: [
+      {
+        name: "Jerry",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Spike",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Tyke",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      }
+    ]
+  },
+  {
+    date: "2016-05-07",
+    name: "Tom",
+    state: "California",
+    city: "San Francisco",
+    address: "3650 21st St, San Francisco",
+    zip: "CA 94114",
+    family: [
+      {
+        name: "Jerry",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Spike",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      },
+      {
+        name: "Tyke",
+        state: "California",
+        city: "San Francisco",
+        address: "3650 21st St, San Francisco",
+        zip: "CA 94114"
+      }
+    ]
+  }
+];
+
+export { tableData, tableDataMore, tableDataSortable, tableDataExpand };
--- a/src/views/pure-table/components/expand.vue
+++ b/src/views/pure-table/components/expand.vue
@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { tableDataExpand } from "./data";
+
+const parentBorder = ref(false);
+const childBorder = ref(false);
+
+const columns: TableColumnList = [
+  {
+    type: "expand",
+    slot: "expand"
+  },
+  {
+    label: "日期",
+    prop: "date"
+  },
+  {
+    label: "姓名",
+    prop: "name"
+  }
+];
+
+const childColumns: TableColumnList = [
+  {
+    label: "Name",
+    prop: "name"
+  },
+  {
+    label: "State",
+    prop: "state"
+  },
+  {
+    label: "City",
+    prop: "city"
+  },
+  {
+    label: "Address",
+    prop: "address"
+  },
+  {
+    label: "Zip",
+    prop: "zip"
+  }
+];
+</script>
+
+<template>
+  <div>
+    switch parent border: <el-switch v-model="parentBorder" /> switch child
+    border: <el-switch v-model="childBorder" />
+    <pure-table
+      :data="tableDataExpand"
+      :columns="columns"
+      :border="parentBorder"
+    >
+      <template #expand="{ row }">
+        <div class="m-4">
+          <p class="mb-2">State: {{ row.state }}</p>
+          <p class="mb-2">City: {{ row.city }}</p>
+          <p class="mb-2">Address: {{ row.address }}</p>
+          <p class="mb-4">Zip: {{ row.zip }}</p>
+          <h3>Family</h3>
+          <pure-table
+            :data="row.family"
+            :columns="childColumns"
+            :border="childBorder"
+          />
+        </div>
+      </template>
+    </pure-table>
+  </div>
+</template>
--- a/src/views/pure-table/components/filters.vue
+++ b/src/views/pure-table/components/filters.vue
@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const tableRef = ref();
+
+const clearFilter = val => {
+  const { clearFilter } = tableRef.value.getTableRef();
+  clearFilter(val);
+};
+
+const resetDateFilter = () => {
+  clearFilter(["date"]);
+};
+
+const filterTag = (value, row) => {
+  return row.tag === value;
+};
+
+const filterHandler = (value, row, column) => {
+  const property = column["property"];
+  return row[property] === value;
+};
+
+const columns: TableColumnList = [
+  {
+    label: "日期",
+    prop: "date",
+    sortable: true,
+    columnKey: "date",
+    filters: [
+      { text: "2016-05-01", value: "2016-05-01" },
+      { text: "2016-05-02", value: "2016-05-02" },
+      { text: "2016-05-03", value: "2016-05-03" },
+      { text: "2016-05-04", value: "2016-05-04" }
+    ],
+    filterMethod: filterHandler
+  },
+  {
+    label: "姓名",
+    prop: "name"
+  },
+  {
+    label: "地址",
+    prop: "address"
+  },
+  {
+    label: "标签",
+    prop: "tag",
+    filters: [
+      { text: "Home", value: "Home" },
+      { text: "Office", value: "Office" }
+    ],
+    filterMethod: filterTag,
+    filterPlacement: "bottom-end",
+    slot: "tag"
+  }
+];
+
+const tableData = [
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+    tag: "Home"
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+    tag: "Office"
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+    tag: "Home"
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+    tag: "Office"
+  }
+];
+</script>
+
+<template>
+  <div>
+    <el-button @click="resetDateFilter">reset date filter</el-button>
+    <el-button @click="clearFilter">reset all filters</el-button>
+    <pure-table
+      ref="tableRef"
+      row-key="date"
+      :data="tableData"
+      :columns="columns"
+    >
+      <template #tag="{ row }">
+        <el-tag :type="row.tag === 'Home' ? '' : 'success'" disable-transitions>
+          {{ row.tag }}
+        </el-tag>
+      </template>
+    </pure-table>
+  </div>
+</template>
--- a/src/views/pure-table/components/fixColumn.vue
+++ b/src/views/pure-table/components/fixColumn.vue
@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { tableDataMore } from "./data";
+
+const props = withDefaults(
+  defineProps<{
+    height?: string;
+  }>(),
+  {
+    height: null
+  }
+);
+
+const columns: TableColumnList = [
+  {
+    label: "日期",
+    prop: "date",
+    width: "260",
+    fixed: true
+  },
+  {
+    label: "姓名",
+    prop: "name",
+    width: "260"
+  },
+  {
+    label: "地区",
+    prop: "state",
+    width: "260"
+  },
+  {
+    label: "城市",
+    prop: "city",
+    width: "260"
+  },
+  {
+    label: "地址",
+    prop: "address",
+    width: "260"
+  },
+  {
+    label: "邮编",
+    prop: "post-code",
+    width: "260"
+  },
+  {
+    label: "操作",
+    width: "120",
+    fixed: "right",
+    slot: "operation"
+  }
+];
+
+function handleClick(row) {
+  console.log(
+    "%crow===>>>: ",
+    "color: MidnightBlue; background: Aquamarine; font-size: 20px;",
+    row
+  );
+}
+</script>
+
+<template>
+  <pure-table
+    :data="
+      props.height
+        ? tableDataMore.concat(tableDataMore).concat(tableDataMore)
+        : tableDataMore
+    "
+    :columns="columns"
+    :height="props.height"
+  >
+    <template #operation="{ row }">
+      <el-button link type="primary" size="small" @click="handleClick(row)">
+        Detail
+      </el-button>
+      <el-button link type="primary" size="small">Edit</el-button>
+    </template>
+  </pure-table>
+</template>
--- a/src/views/pure-table/components/fixHeader.vue
+++ b/src/views/pure-table/components/fixHeader.vue
@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { tableData } from "./data";
+
+const columns: TableColumnList = [
+  {
+    label: "日期",
+    prop: "date"
+  },
+  {
+    label: "姓名",
+    prop: "name"
+  },
+  {
+    label: "地址",
+    prop: "address"
+  }
+];
+</script>
+
+<template>
+  <pure-table
+    :data="tableData.concat(tableData).concat(tableData)"
+    :columns="columns"
+    height="360"
+  />
+</template>
--- a/src/views/pure-table/components/fluidHeight.vue
+++ b/src/views/pure-table/components/fluidHeight.vue
@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import dayjs from "dayjs";
+import { tableDataMore } from "./data";
+
+const columns: TableColumnList = [
+  {
+    label: "日期",
+    prop: "date",
+    width: "260",
+    fixed: true
+  },
+  {
+    label: "姓名",
+    prop: "name",
+    width: "260"
+  },
+  {
+    label: "地区",
+    prop: "state",
+    width: "260"
+  },
+  {
+    label: "城市",
+    prop: "city",
+    width: "260"
+  },
+  {
+    label: "地址",
+    prop: "address",
+    width: "260"
+  },
+  {
+    label: "邮编",
+    prop: "post-code",
+    width: "260"
+  },
+  {
+    label: "操作",
+    width: "120",
+    fixed: "right",
+    slot: "operation"
+  }
+];
+
+const now = new Date();
+const tableData = ref(tableDataMore);
+
+const deleteRow = (index: number) => {
+  tableData.value.splice(index, 1);
+};
+
+const onAddItem = () => {
+  now.setDate(now.getDate() + 1);
+  tableData.value.push({
+    date: dayjs(now).format("YYYY-MM-DD"),
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+    state: "California",
+    city: "Los Angeles",
+    "post-code": "CA 90036"
+  });
+};
+</script>
+
+<template>
+  <div>
+    <pure-table :data="tableData" :columns="columns" maxHeight="500">
+      <template #operation="{ $index }">
+        <el-button
+          link
+          type="primary"
+          size="small"
+          @click.prevent="deleteRow($index)"
+        >
+          Remove
+        </el-button>
+      </template>
+    </pure-table>
+    <el-button class="mt-4" style="width: 100%" @click="onAddItem">
+      Add Item
+    </el-button>
+  </div>
+</template>
--- a/src/views/pure-table/components/groupHeader.vue
+++ b/src/views/pure-table/components/groupHeader.vue
@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { tableDataMore } from "./data";
+
+const columns: TableColumnList = [
+  {
+    label: "日期",
+    prop: "date",
+    fixed: true
+  },
+  {
+    label: "姓名",
+    prop: "name",
+    children: [
+      {
+        label: "地区",
+        children: [
+          {
+            label: "城市",
+            prop: "city"
+          },
+          {
+            label: "地址",
+            prop: "address"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    label: "邮编",
+    prop: "post-code"
+  }
+];
+</script>
+
+<template>
+  <pure-table :data="tableDataMore" :columns="columns" alignWhole="center" />
+</template>
--- a/src/views/pure-table/components/header-renderer/columns.tsx
+++ b/src/views/pure-table/components/header-renderer/columns.tsx
@ -0,0 +1,70 @@
+import { message } from "@pureadmin/components";
+import { tableData } from "../data";
+import { ref, computed } from "vue";
+
+// 如果您不习惯tsx写法，可以传slot，然后在template里写
+// 需是hooks写法（函数中有return），避免失去响应性
+export function useColumns() {
+  const search = ref("");
+  const filterTableData = computed(() =>
+    tableData.filter(
+      data =>
+        !search.value ||
+        data.name.toLowerCase().includes(search.value.toLowerCase())
+    )
+  );
+
+  const handleEdit = (index: number, row) => {
+    message.success(`您编辑了第 ${index} 行，数据为：${JSON.stringify(row)}`);
+  };
+
+  const handleDelete = (index: number, row) => {
+    message.error(`您删除了第 ${index} 行，数据为：${JSON.stringify(row)}`);
+  };
+
+  const columns: TableColumnList = [
+    {
+      label: "日期",
+      prop: "date"
+    },
+    {
+      label: "姓名",
+      prop: "name"
+    },
+    {
+      label: "地址",
+      prop: "address"
+    },
+    {
+      align: "right",
+      // 自定义表头
+      headerRenderer: () => (
+        <el-input
+          v-model={search.value}
+          size="small"
+          clearable
+          placeholder="Type to search"
+        />
+      ),
+      cellRenderer: ({ index, row }) => (
+        <>
+          <el-button size="small" onClick={() => handleEdit(index + 1, row)}>
+            Edit
+          </el-button>
+          <el-button
+            size="small"
+            type="danger"
+            onClick={() => handleDelete(index + 1, row)}
+          >
+            Delete
+          </el-button>
+        </>
+      )
+    }
+  ];
+
+  return {
+    columns,
+    filterTableData
+  };
+}
--- a/src/views/pure-table/components/header-renderer/index.vue
+++ b/src/views/pure-table/components/header-renderer/index.vue
@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { useColumns } from "./columns";
+
+const { columns, filterTableData } = useColumns();
+</script>
+
+<template>
+  <pure-table :data="filterTableData" :columns="columns" />
+</template>
--- a/src/views/pure-table/components/index.ts
+++ b/src/views/pure-table/components/index.ts
@ -0,0 +1,43 @@
+import Base from "./base.vue";
+import Stripe from "./stripe.vue";
+import Border from "./border.vue";
+import Status from "./status.vue";
+import FixHeader from "./fixHeader.vue";
+import FixColumn from "./fixColumn.vue";
+import FluidHeight from "./fluidHeight.vue";
+import GroupHeader from "./groupHeader.vue";
+import Radio from "./radio.vue";
+import MultipleChoice from "./multipleChoice.vue";
+import Sortable from "./sortable.vue";
+import Filters from "./filters.vue";
+import ColumnTemplate from "./column-template/index.vue";
+import HeaderRenderer from "./header-renderer/index.vue";
+import Expand from "./expand.vue";
+import TreeTable from "./tree.vue";
+import TotalRow from "./totalRow.vue";
+import Merge from "./merge.vue";
+import CustomIndex from "./customIndex.vue";
+import Layout from "./layout.vue";
+
+export {
+  Base,
+  Stripe,
+  Border,
+  Status,
+  FixHeader,
+  FixColumn,
+  FluidHeight,
+  GroupHeader,
+  Radio,
+  MultipleChoice,
+  Sortable,
+  Filters,
+  ColumnTemplate,
+  HeaderRenderer,
+  Expand,
+  TreeTable,
+  TotalRow,
+  Merge,
+  CustomIndex,
+  Layout
+};
--- a/src/views/pure-table/components/layout.vue
+++ b/src/views/pure-table/components/layout.vue
@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { tableData } from "./data";
+
+type TableLayout = "fixed" | "auto";
+
+const tableLayout = ref<TableLayout>("fixed");
+
+const columns: TableColumnList = [
+  {
+    label: "日期",
+    prop: "date"
+  },
+  {
+    label: "姓名",
+    prop: "name"
+  },
+  {
+    label: "地址",
+    prop: "address"
+  }
+];
+</script>
+
+<template>
+  <div>
+    <el-radio-group v-model="tableLayout">
+      <el-radio-button label="fixed" />
+      <el-radio-button label="auto" />
+    </el-radio-group>
+
+    <pure-table
+      :data="tableData"
+      :columns="columns"
+      :table-layout="tableLayout"
+    />
+  </div>
+</template>
--- a/src/views/pure-table/components/merge.vue
+++ b/src/views/pure-table/components/merge.vue
@ -0,0 +1,124 @@
+<script setup lang="ts">
+interface User {
+  id: string;
+  name: string;
+  amount1: string;
+  amount2: string;
+  amount3: number;
+}
+
+interface SpanMethodProps {
+  row: User;
+  column: any;
+  rowIndex: number;
+  columnIndex: number;
+}
+
+const arraySpanMethod = ({ rowIndex, columnIndex }: SpanMethodProps) => {
+  if (rowIndex % 2 === 0) {
+    if (columnIndex === 0) {
+      return [1, 2];
+    } else if (columnIndex === 1) {
+      return [0, 0];
+    }
+  }
+};
+
+const objectSpanMethod = ({ rowIndex, columnIndex }: SpanMethodProps) => {
+  if (columnIndex === 0) {
+    if (rowIndex % 2 === 0) {
+      return {
+        rowspan: 2,
+        colspan: 1
+      };
+    } else {
+      return {
+        rowspan: 0,
+        colspan: 0
+      };
+    }
+  }
+};
+
+const tableData: User[] = [
+  {
+    id: "12987122",
+    name: "Tom",
+    amount1: "234",
+    amount2: "3.2",
+    amount3: 10
+  },
+  {
+    id: "12987123",
+    name: "Tom",
+    amount1: "165",
+    amount2: "4.43",
+    amount3: 12
+  },
+  {
+    id: "12987124",
+    name: "Tom",
+    amount1: "324",
+    amount2: "1.9",
+    amount3: 9
+  },
+  {
+    id: "12987125",
+    name: "Tom",
+    amount1: "621",
+    amount2: "2.2",
+    amount3: 17
+  },
+  {
+    id: "12987126",
+    name: "Tom",
+    amount1: "539",
+    amount2: "4.1",
+    amount3: 15
+  }
+];
+
+const columns: TableColumnList = [
+  {
+    label: "ID",
+    prop: "id"
+  },
+  {
+    label: "Name",
+    prop: "name"
+  },
+  {
+    label: "Amount 1",
+    prop: "amount1",
+    sortable: true
+  },
+  {
+    label: "Amount 2",
+    prop: "amount2",
+    sortable: true
+  },
+  {
+    label: "Amount 3",
+    prop: "amount3",
+    sortable: true
+  }
+];
+</script>
+
+<template>
+  <div>
+    <pure-table
+      :data="tableData"
+      :columns="columns"
+      :span-method="arraySpanMethod"
+      border
+    />
+
+    <pure-table
+      :data="tableData"
+      :columns="columns"
+      :span-method="objectSpanMethod"
+      border
+    />
+  </div>
+</template>
--- a/src/views/pure-table/components/multipleChoice.vue
+++ b/src/views/pure-table/components/multipleChoice.vue
@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { tableData } from "./data";
+
+const tableRef = ref();
+
+const multipleSelection = ref([]);
+const toggleSelection = (rows?: any) => {
+  const { toggleRowSelection, clearSelection } = tableRef.value.getTableRef();
+  if (rows) {
+    rows.forEach(row => {
+      toggleRowSelection(row, undefined);
+    });
+  } else {
+    clearSelection();
+  }
+};
+const handleSelectionChange = val => {
+  multipleSelection.value = val;
+};
+
+const columns: TableColumnList = [
+  {
+    type: "selection",
+    align: "left"
+  },
+  {
+    label: "日期",
+    prop: "date"
+  },
+  {
+    label: "姓名",
+    prop: "name"
+  },
+  {
+    label: "地址",
+    prop: "address"
+  }
+];
+</script>
+
+<template>
+  <div>
+    <pure-table
+      ref="tableRef"
+      :data="tableData"
+      :columns="columns"
+      @selection-change="handleSelectionChange"
+    />
+    <div style="margin-top: 20px">
+      <el-button @click="toggleSelection([tableData[1], tableData[2]])">
+        Toggle selection status of second and third rows
+      </el-button>
+      <el-button @click="toggleSelection()">Clear selection</el-button>
+    </div>
+  </div>
+</template>
--- a/src/views/pure-table/components/radio.vue
+++ b/src/views/pure-table/components/radio.vue
@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { tableData } from "./data";
+
+const tableRef = ref();
+const currentRow = ref();
+
+const setCurrent = (row?: any) => {
+  // 获取表格的方法 tableRef.value.getTableRef()
+  const { setCurrentRow } = tableRef.value.getTableRef();
+  setCurrentRow(row);
+};
+const handleCurrentChange = val => {
+  currentRow.value = val;
+};
+
+const columns: TableColumnList = [
+  {
+    label: "日期",
+    prop: "date"
+  },
+  {
+    label: "姓名",
+    prop: "name"
+  },
+  {
+    label: "地址",
+    prop: "address"
+  }
+];
+</script>
+
+<template>
+  <div>
+    <pure-table
+      ref="tableRef"
+      :data="tableData"
+      :columns="columns"
+      highlight-current-row
+      @current-change="handleCurrentChange"
+    />
+    <div style="margin-top: 20px">
+      <el-button @click="setCurrent(tableData[1])">Select second row</el-button>
+      <el-button @click="setCurrent()">Clear selection</el-button>
+    </div>
+  </div>
+</template>
--- a/src/views/pure-table/components/sortable.vue
+++ b/src/views/pure-table/components/sortable.vue
@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { tableDataSortable } from "./data";
+
+const columns: TableColumnList = [
+  {
+    label: "日期",
+    prop: "date",
+    sortable: true
+  },
+  {
+    label: "姓名",
+    prop: "name"
+  },
+  {
+    label: "地址",
+    prop: "address",
+    formatter: ({ address }) => `格式化后的内容：${address}`
+  }
+];
+</script>
+
+<template>
+  <pure-table
+    :data="tableDataSortable"
+    :columns="columns"
+    :default-sort="{ prop: 'date', order: 'ascending' }"
+  />
+</template>
--- a/src/views/pure-table/components/status.vue
+++ b/src/views/pure-table/components/status.vue
@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { tableData } from "./data";
+
+const tableRowClassName = ({ rowIndex }: { rowIndex: number }) => {
+  if (rowIndex === 1 || rowIndex === 5) {
+    return "pure-warning-row";
+  } else if (rowIndex === 3 || rowIndex === 7) {
+    return "pure-success-row";
+  }
+  return "";
+};
+
+const columns: TableColumnList = [
+  {
+    label: "日期",
+    prop: "date"
+  },
+  {
+    label: "姓名",
+    prop: "name"
+  },
+  {
+    label: "地址",
+    prop: "address"
+  }
+];
+</script>
+
+<template>
+  <pure-table
+    :data="tableData"
+    :columns="columns"
+    :row-class-name="tableRowClassName"
+  />
+</template>
+
+<style>
+/* 此处样式会在全局都生效，上面 tableRowClassName 函数返回的值也就是类名必须在全局中唯一，避免样式突出 */
+.pure-warning-row {
+  --el-table-tr-bg-color: var(--el-color-warning-light-9);
+}
+
+.pure-success-row {
+  --el-table-tr-bg-color: var(--el-color-success-light-9);
+}
+</style>
--- a/src/views/pure-table/components/stripe.vue
+++ b/src/views/pure-table/components/stripe.vue
@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { tableData } from "./data";
+
+const columns: TableColumnList = [
+  {
+    label: "日期",
+    prop: "date"
+  },
+  {
+    label: "姓名",
+    prop: "name"
+  },
+  {
+    label: "地址",
+    prop: "address"
+  }
+];
+</script>
+
+<template>
+  <pure-table :data="tableData" :columns="columns" stripe />
+</template>
--- a/src/views/pure-table/components/totalRow.vue
+++ b/src/views/pure-table/components/totalRow.vue
@ -0,0 +1,144 @@
+<script setup lang="ts">
+interface Product {
+  id: string;
+  name: string;
+  amount1: string;
+  amount2: string;
+  amount3: number;
+}
+
+interface SummaryMethodProps<T = Product> {
+  columns: any[];
+  data: T[];
+}
+
+const getSummaries = (param: SummaryMethodProps) => {
+  const { columns, data } = param;
+  const sums: string[] = [];
+  columns.forEach((column, index) => {
+    if (index === 0) {
+      sums[index] = "Total Cost";
+      return;
+    }
+    const values = data.map(item => Number(item[column.property]));
+    if (!values.every(value => Number.isNaN(value))) {
+      sums[index] = `$ ${values.reduce((prev, curr) => {
+        const value = Number(curr);
+        if (!Number.isNaN(value)) {
+          return prev + curr;
+        } else {
+          return prev;
+        }
+      }, 0)}`;
+    } else {
+      sums[index] = "N/A";
+    }
+  });
+
+  return sums;
+};
+
+const tableData: Product[] = [
+  {
+    id: "12987122",
+    name: "Tom",
+    amount1: "234",
+    amount2: "3.2",
+    amount3: 10
+  },
+  {
+    id: "12987123",
+    name: "Tom",
+    amount1: "165",
+    amount2: "4.43",
+    amount3: 12
+  },
+  {
+    id: "12987124",
+    name: "Tom",
+    amount1: "324",
+    amount2: "1.9",
+    amount3: 9
+  },
+  {
+    id: "12987125",
+    name: "Tom",
+    amount1: "621",
+    amount2: "2.2",
+    amount3: 17
+  },
+  {
+    id: "12987126",
+    name: "Tom",
+    amount1: "539",
+    amount2: "4.1",
+    amount3: 15
+  }
+];
+
+const columns: TableColumnList = [
+  {
+    label: "ID",
+    prop: "id"
+  },
+  {
+    label: "Name",
+    prop: "name"
+  },
+  {
+    label: "Amount 1",
+    prop: "amount1",
+    sortable: true
+  },
+  {
+    label: "Amount 2",
+    prop: "amount2",
+    sortable: true
+  },
+  {
+    label: "Amount 3",
+    prop: "amount3",
+    sortable: true
+  }
+];
+
+const columns1: TableColumnList = [
+  {
+    label: "ID",
+    prop: "id"
+  },
+  {
+    label: "Name",
+    prop: "name"
+  },
+  {
+    label: "Cost 1 ($)",
+    prop: "amount1"
+  },
+  {
+    label: "Cost 2 ($)",
+    prop: "amount2"
+  },
+  {
+    label: "Cost 3 ($)",
+    prop: "amount3"
+  }
+];
+</script>
+
+<template>
+  <pure-table
+    :data="tableData"
+    :columns="columns"
+    border
+    show-summary
+    class="mb-6"
+  />
+  <pure-table
+    :data="tableData"
+    :columns="columns1"
+    border
+    :summary-method="getSummaries"
+    show-summary
+  />
+</template>
--- a/src/views/pure-table/components/tree.vue
+++ b/src/views/pure-table/components/tree.vue
@ -0,0 +1,122 @@
+<script setup lang="ts">
+interface User {
+  id: number;
+  date: string;
+  name: string;
+  hasChildren?: boolean;
+  children?: User[];
+}
+
+const load = (
+  row: User,
+  treeNode: unknown,
+  resolve: (date: User[]) => void
+) => {
+  setTimeout(() => {
+    resolve([
+      {
+        id: 31,
+        date: "2016-05-01",
+        name: "wangxiaohu"
+      },
+      {
+        id: 32,
+        date: "2016-05-01",
+        name: "wangxiaohu"
+      }
+    ]);
+  }, 1000);
+};
+
+const tableData: User[] = [
+  {
+    id: 1,
+    date: "2016-05-02",
+    name: "wangxiaohu"
+  },
+  {
+    id: 2,
+    date: "2016-05-04",
+    name: "wangxiaohu"
+  },
+  {
+    id: 3,
+    date: "2016-05-01",
+    name: "wangxiaohu",
+    children: [
+      {
+        id: 31,
+        date: "2016-05-01",
+        name: "wangxiaohu"
+      },
+      {
+        id: 32,
+        date: "2016-05-01",
+        name: "wangxiaohu"
+      }
+    ]
+  },
+  {
+    id: 4,
+    date: "2016-05-03",
+    name: "wangxiaohu"
+  }
+];
+
+const tableData1: User[] = [
+  {
+    id: 1,
+    date: "2016-05-02",
+    name: "wangxiaohu"
+  },
+  {
+    id: 2,
+    date: "2016-05-04",
+    name: "wangxiaohu"
+  },
+  {
+    id: 3,
+    date: "2016-05-01",
+    name: "wangxiaohu",
+    hasChildren: true
+  },
+  {
+    id: 4,
+    date: "2016-05-03",
+    name: "wangxiaohu"
+  }
+];
+
+const columns: TableColumnList = [
+  {
+    label: "日期",
+    prop: "date"
+  },
+  {
+    label: "姓名",
+    prop: "name"
+  }
+];
+</script>
+
+<template>
+  <div>
+    <pure-table
+      :data="tableData"
+      :columns="columns"
+      row-key="id"
+      border
+      default-expand-all
+      class="mb-6"
+    />
+    <pure-table
+      :data="tableData1"
+      :columns="columns"
+      row-key="id"
+      border
+      lazy
+      :load="load"
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+    />
+  </div>
+</template>
--- a/src/views/pure-table/index.vue
+++ b/src/views/pure-table/index.vue
@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { list } from "./list";
+import { Tabs, TabPane } from "@pureadmin/components";
+
+defineOptions({
+  name: "PureTable"
+});
+</script>
+
+<template>
+  <el-card>
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          平台二次封装 element-plus 的 Table ，完全兼容 Api
+          并提供灵活的配置项以及完善的类型提醒，再也不用将代码都写在 template
+          里了，欢迎 Star
+          <el-link
+            href="https://github.com/xiaoxian521/pure-admin-table"
+            target="_blank"
+            style="font-size: 16px; margin: 0 4px 5px"
+          >
+            @pureadmin/table
+          </el-link>
+        </span>
+      </div>
+    </template>
+
+    <Tabs :destroyInactiveTabPane="true">
+      <TabPane v-for="item of list" :key="item.key">
+        <template #tab>
+          <el-tooltip :content="item.content" placement="top-end">
+            <span>{{ item.title }}</span>
+          </el-tooltip>
+        </template>
+        <component :is="item.component" />
+      </TabPane>
+    </Tabs>
+  </el-card>
+</template>
+
+<style scoped>
+:deep(.ant-tabs-content-holder) {
+  margin-top: 10px;
+}
+</style>
--- a/src/views/pure-table/list.tsx
+++ b/src/views/pure-table/list.tsx
@ -0,0 +1,154 @@
+import {
+  Base,
+  Stripe,
+  Border,
+  Status,
+  FixHeader,
+  FixColumn,
+  FluidHeight,
+  GroupHeader,
+  Radio,
+  MultipleChoice,
+  Sortable,
+  Filters,
+  ColumnTemplate,
+  HeaderRenderer,
+  Expand,
+  TreeTable,
+  TotalRow,
+  Merge,
+  CustomIndex,
+  Layout
+} from "./components";
+
+const rendContent = (val: string) =>
+  `代码位置：src/views/pure-table/components/${val}.vue`;
+
+export const list = [
+  {
+    key: "base",
+    content: rendContent("base"),
+    title: "基础表格",
+    component: Base
+  },
+  {
+    key: "stripe",
+    content: rendContent("stripe"),
+    title: "带斑马纹表格",
+    component: Stripe
+  },
+  {
+    key: "border",
+    content: rendContent("border"),
+    title: "带边框表格",
+    component: Border
+  },
+  {
+    key: "status",
+    content: rendContent("status"),
+    title: "带状态表格",
+    component: Status
+  },
+  {
+    key: "fixHeader",
+    content: rendContent("fixHeader"),
+    title: "固定表头",
+    component: FixHeader
+  },
+  {
+    key: "fixColumn",
+    content: rendContent("fixColumn"),
+    title: "固定列",
+    component: FixColumn
+  },
+  {
+    key: "fixColumnHeader",
+    content: rendContent("fixColumn"),
+    title: "固定列和表头",
+    component: () => <FixColumn height={"360"} />
+  },
+  {
+    key: "groupHeader",
+    content: rendContent("groupHeader"),
+    title: "多级表头（表头分组）",
+    component: GroupHeader
+  },
+  {
+    key: "fluidHeight",
+    content: rendContent("fluidHeight"),
+    title: "流体高度",
+    component: FluidHeight
+  },
+  {
+    key: "radio",
+    content: rendContent("radio"),
+    title: "单选",
+    component: Radio
+  },
+  {
+    key: "multipleChoice",
+    content: rendContent("multipleChoice"),
+    title: "多选",
+    component: MultipleChoice
+  },
+  {
+    key: "sortable",
+    content: rendContent("sortable"),
+    title: "排序和格式化",
+    component: Sortable
+  },
+  {
+    key: "filters",
+    content: rendContent("filters"),
+    title: "筛选",
+    component: Filters
+  },
+  {
+    key: "column-template",
+    content: rendContent("column-template/index"),
+    title: "自定义列模板",
+    component: ColumnTemplate
+  },
+  {
+    key: "header-renderer",
+    content: rendContent("header-renderer/index"),
+    title: "自定义表头",
+    component: HeaderRenderer
+  },
+  {
+    key: "expand",
+    content: rendContent("expand"),
+    title: "展开行",
+    component: Expand
+  },
+  {
+    key: "tree",
+    content: rendContent("tree"),
+    title: "树形数据与懒加载",
+    component: TreeTable
+  },
+  {
+    key: "totalRow",
+    content: rendContent("totalRow"),
+    title: "表尾合计行",
+    component: TotalRow
+  },
+  {
+    key: "merge",
+    content: rendContent("merge"),
+    title: "合并行或列",
+    component: Merge
+  },
+  {
+    key: "customIndex",
+    content: rendContent("customIndex"),
+    title: "自定义索引",
+    component: CustomIndex
+  },
+  {
+    key: "layout",
+    content: rendContent("layout"),
+    title: "表格布局",
+    component: Layout
+  }
+];
--- a/src/views/system/dept/columns.tsx
+++ b/src/views/system/dept/columns.tsx
@ -1,8 +1,7 @@
-import { ref } from "vue";
 import dayjs from "dayjs";

 export function useColumns() {
-  const columns = ref([
+  const columns: TableColumnList = [
    {
      type: "selection",
      width: 55,
@ -13,7 +12,6 @@ export function useColumns() {
      label: "序号",
      type: "index",
      width: 60,
-      align: "left",
      hide: ({ checkList }) => !checkList.includes("序号列")
    },
    {
@ -58,7 +56,7 @@ export function useColumns() {
      width: 140,
      slot: "operation"
    }
-  ]);
+  ];

  return {
    columns
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@ -99,11 +99,12 @@ onMounted(() => {
        </el-button>
      </template>
      <template v-slot="{ size, checkList }">
-        <PureTable
+        <pure-table
          ref="tableRef"
          border
-          align="center"
+          align-whole="center"
          row-key="id"
+          showOverflowTooltip
          table-layout="auto"
          default-expand-all
          :size="size"
@ -142,7 +143,7 @@ onMounted(() => {
              </template>
            </el-popconfirm>
          </template>
-        </PureTable>
+        </pure-table>
      </template>
    </TableProBar>
  </div>
--- a/src/views/system/role/columns.tsx
+++ b/src/views/system/role/columns.tsx
@ -6,10 +6,11 @@ import { Switch, message } from "@pureadmin/components";
 export function useColumns() {
  const switchLoadMap = ref({});

-  const columns = ref([
+  const columns: TableColumnList = [
    {
      type: "selection",
      width: 55,
+      align: "left",
      hide: ({ checkList }) => !checkList.includes("勾选列")
    },
    {
@ -60,7 +61,7 @@ export function useColumns() {
          unCheckedValue={0}
          checked-children="已开启"
          un-checked-children="已关闭"
-          onChange={() => onChange(scope)}
+          onChange={() => onChange(scope as any)}
        />
      )
    },
@ -77,7 +78,7 @@ export function useColumns() {
      width: 180,
      slot: "operation"
    }
-  ]);
+  ];

  function onChange({ row, index }) {
    ElMessageBox.confirm(
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@ -118,9 +118,9 @@ onMounted(() => {
        </el-button>
      </template>
      <template v-slot="{ size, checkList }">
-        <PureTable
+        <pure-table
          border
-          align="center"
+          align-whole="center"
          showOverflowTooltip
          table-layout="auto"
          :size="size"
@ -199,7 +199,7 @@ onMounted(() => {
              </template>
            </el-dropdown>
          </template>
-        </PureTable>
+        </pure-table>
      </template>
    </TableProBar>
  </div>
--- a/src/views/system/user/columns.tsx
+++ b/src/views/system/user/columns.tsx
@ -6,10 +6,11 @@ import { Switch, message } from "@pureadmin/components";
 export function useColumns() {
  const switchLoadMap = ref({});

-  const columns = ref([
+  const columns: TableColumnList = [
    {
      type: "selection",
      width: 55,
+      align: "left",
      hide: ({ checkList }) => !checkList.includes("勾选列")
    },
    {
@ -65,7 +66,7 @@ export function useColumns() {
          unCheckedValue={0}
          checked-children="已开启"
          un-checked-children="已关闭"
-          onChange={() => onChange(scope)}
+          onChange={() => onChange(scope as any)}
        />
      )
    },
@ -82,7 +83,7 @@ export function useColumns() {
      width: 180,
      slot: "operation"
    }
-  ]);
+  ];

  function onChange({ row, index }) {
    ElMessageBox.confirm(
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@ -131,9 +131,9 @@ onMounted(() => {
          </el-button>
        </template>
        <template v-slot="{ size, checkList }">
-          <PureTable
+          <pure-table
            border
-            align="center"
+            align-whole="center"
            table-layout="auto"
            :size="size"
            :data="dataList"
@ -211,7 +211,7 @@ onMounted(() => {
                </template>
              </el-dropdown>
            </template>
-          </PureTable>
+          </pure-table>
        </template>
      </TableProBar>
    </div>
--- a/types/global.d.ts
+++ b/types/global.d.ts
@ -7,6 +7,7 @@ import type {
 } from "vue";
 import type { ECharts } from "echarts";
 import { type ResponsiveStorage } from "./index";
+import type { TableColumns } from "@pureadmin/table";

 // GlobalComponents for Volar
 declare module "vue" {
@ -126,6 +127,9 @@ declare global {
    $config: ServerConfigs;
  }

+  // 继承 @pureadmin/table 的 TableColumns，方便全局直接调用
+  declare interface TableColumnList extends Array<TableColumns> {}
+
  function parseInt(s: string | number, radix?: number): number;

  function parseFloat(string: string | number): number;