feat: 新增 @pureadmin/table 分页和加载动画示例

package.json

@@ -35,8 +35,8 @@
     "@logicflow/core": "^1.1.30",
     "@logicflow/extension": "^1.1.30",
     "@pureadmin/descriptions": "^1.1.0",
-    "@pureadmin/table": "^1.8.2",
-    "@pureadmin/utils": "^1.7.2",
+    "@pureadmin/table": "^1.8.3",
+    "@pureadmin/utils": "^1.7.4",
     "@vueuse/core": "^9.6.0",
     "@vueuse/motion": "2.0.0-beta.12",
     "@wangeditor/editor": "^5.1.21",

src/views/pure-table/high/list.tsx

@@ -1,3 +1,4 @@
+import Page from "./page/index.vue";
 import RowDrag from "./drag/row/index.vue";
 import ColumnDrag from "./drag/column/index.vue";
 import Contextmenu from "./contextmenu/index.vue";
@@ -11,6 +12,12 @@ const rendContent = (val: string) =>
   `代码位置：src/views/pure-table/high/${val}/index.vue`;
 
 export const list = [
+  {
+    key: "page",
+    content: rendContent("page"),
+    title: "分页、加载动画",
+    component: Page
+  },
   {
     key: "rowDrag",
     content: rendContent("drag/row"),

src/views/pure-table/high/page/columns.tsx

@@ -0,0 +1,91 @@
+import { tableData } from "../data";
+import { clone, delay } from "@pureadmin/utils";
+import { ref, onMounted, reactive, watchEffect } from "vue";
+import type { PaginationProps, LoadingConfig, Align } from "@pureadmin/table";
+
+export function useColumns() {
+  const dataList = ref([]);
+  const loading = ref(true);
+  const paginationAlign = ref("right");
+  const columns: TableColumnList = [
+    {
+      label: "日期",
+      prop: "date"
+    },
+    {
+      label: "姓名",
+      prop: "name"
+    },
+    {
+      label: "地址",
+      prop: "address"
+    }
+  ];
+
+  /** 分页配置 */
+  const pagination = reactive<PaginationProps>({
+    pageSize: 10,
+    currentPage: 1,
+    pageSizes: [10, 15, 20],
+    total: 0,
+    align: "right",
+    background: true
+  });
+
+  /** 加载动画配置 */
+  const loadingConfig = reactive<LoadingConfig>({
+    text: "正在加载第一页...",
+    viewBox: "-10, -10, 50, 50",
+    spinner: `
+        <path class="path" d="
+          M 30 15
+          L 28 17
+          M 25.61 25.61
+          A 15 15, 0, 0, 1, 15 30
+          A 15 15, 0, 1, 1, 27.99 7.5
+          L 15 15
+        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
+      `
+    // svg: "",
+    // background: rgba()
+  });
+
+  function onSizeChange(val) {
+    console.log("onSizeChange", val);
+  }
+
+  function onCurrentChange(val) {
+    loadingConfig.text = `正在加载第${val}页...`;
+    loading.value = true;
+    delay(600).then(() => {
+      loading.value = false;
+    });
+  }
+
+  watchEffect(() => {
+    pagination.align = paginationAlign.value as Align;
+  });
+
+  onMounted(() => {
+    delay(600).then(() => {
+      const newList = [];
+      Array.from({ length: 6 }).forEach(() => {
+        newList.push(clone(tableData, true));
+      });
+      dataList.value = newList.flat(Infinity);
+      pagination.total = dataList.value.length;
+      loading.value = false;
+    });
+  });
+
+  return {
+    loading,
+    columns,
+    dataList,
+    pagination,
+    loadingConfig,
+    paginationAlign,
+    onSizeChange,
+    onCurrentChange
+  };
+}

src/views/pure-table/high/page/index.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { useColumns } from "./columns";
+
+const {
+  loading,
+  columns,
+  dataList,
+  pagination,
+  loadingConfig,
+  paginationAlign,
+  onSizeChange,
+  onCurrentChange
+} = useColumns();
+</script>
+
+<template>
+  <div>
+    <el-space class="float-right mb-2">
+      <p>分页的对齐方式：</p>
+      <el-radio-group v-model="paginationAlign">
+        <el-radio-button label="right">right</el-radio-button>
+        <el-radio-button label="center">center</el-radio-button>
+        <el-radio-button label="left">left</el-radio-button>
+      </el-radio-group>
+    </el-space>
+    <pure-table
+      border
+      row-key="id"
+      alignWhole="center"
+      showOverflowTooltip
+      :loading="loading"
+      :loading-config="loadingConfig"
+      :height="440"
+      :data="
+        dataList.slice(
+          (pagination.currentPage - 1) * pagination.pageSize,
+          pagination.currentPage * pagination.pageSize
+        )
+      "
+      :columns="columns"
+      :pagination="pagination"
+      @size-change="onSizeChange"
+      @current-change="onCurrentChange"
+    />
+  </div>
+</template>