feat: 加入列表

src/router/modules/testlist.ts

+export default {
+  path: "/testlist",
+  redirect: "/testlist/index",
+  meta: {
+    icon: "ri/file-info-line",
+    title: "测试列表"
+  },
+  children: [
+    {
+      path: "/testlist/index",
+      name: "TestList",
+      component: () => import("@/views/testlist/index.vue"),
+      meta: {
+        title: "测试列表"
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;

src/views/testlist/columns.tsx

+import type {
+  LoadingConfig,
+  AdaptiveConfig,
+  PaginationProps
+} from "@pureadmin/table";
+import { tableData } from "./data";
+import { ref, onMounted, reactive } from "vue";
+import { clone, delay } from "@pureadmin/utils";
+
+export function useColumns() {
+  const dataList = ref([]);
+  const loading = ref(true);
+  const columns: TableColumnList = [
+    {
+      label: "日期",
+      prop: "date"
+    },
+    {
+      label: "姓名",
+      prop: "name"
+    },
+    {
+      label: "地址",
+      prop: "address"
+    }
+  ];
+
+  /** 分页配置 */
+  const pagination = reactive<PaginationProps>({
+    pageSize: 20,
+    currentPage: 1,
+    pageSizes: [20, 40, 60],
+    total: 0,
+    align: "right",
+    background: true,
+    size: "default"
+  });
+
+  /** 加载动画配置 */
+  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()
+  });
+
+  /** 撑满内容区自适应高度相关配置 */
+  const adaptiveConfig: AdaptiveConfig = {
+    /** 表格距离页面底部的偏移量，默认值为 `96` */
+    offsetBottom: 110
+    /** 是否固定表头，默认值为 `true`（如果不想固定表头，fixHeader设置为false并且表格要设置table-layout="auto"） */
+    // fixHeader: true
+    /** 页面 `resize` 时的防抖时间，默认值为 `60` ms */
+    // timeout: 60
+    /** 表头的 `z-index`，默认值为 `100` */
+    // zIndex: 100
+  };
+
+  function onSizeChange(val) {
+    console.log("onSizeChange", val);
+  }
+
+  function onCurrentChange(val) {
+    loadingConfig.text = `正在加载第${val}页...`;
+    loading.value = true;
+    delay(600).then(() => {
+      loading.value = false;
+    });
+  }
+
+  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 });
+      });
+      pagination.total = dataList.value.length;
+      loading.value = false;
+    });
+  });
+
+  return {
+    loading,
+    columns,
+    dataList,
+    pagination,
+    loadingConfig,
+    adaptiveConfig,
+    onSizeChange,
+    onCurrentChange
+  };
+}

src/views/testlist/data.ts

+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"
+  },
+  {
+    date,
+    name: "Mike1",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date,
+    name: "Mike2",
+    address: "No. 189, Grove St, Los Angeles"
+  }
+];
+
+const tableDataMore = clone(tableData, true).map(item =>
+  Object.assign(item, {
+    state: "California",
+    city: "Los Angeles",
+    "post-code": "CA 90036"
+  })
+);
+
+const tableDataImage = clone(tableData, true).map((item, index) =>
+  Object.assign(item, {
+    image: `https://pure-admin.github.io/pure-admin-table/imgs/${index + 1}.jpg`
+  })
+);
+
+const tableDataSortable = clone(tableData, true).map((item, index) => {
+  delete item.date;
+  Object.assign(item, {
+    date: `${dayjs(new Date()).format("YYYY-MM")}-${index + 1}`
+  });
+});
+
+const tableDataDrag = clone(tableData, true).map((item, index) => {
+  delete item.address;
+  delete item.date;
+  return Object.assign(item, {
+    id: index + 1,
+    date: `${dayjs(new Date()).format("YYYY-MM")}-${index + 1}`
+  });
+});
+
+const tableDataEdit = clone(tableData, true).map((item, index) => {
+  delete item.date;
+  return Object.assign(item, {
+    id: index + 1,
+    date: `${dayjs(new Date()).format("YYYY-MM")}-${index + 1}`,
+    address: "China",
+    sex: index % 2 === 0 ? "男" : "女"
+  });
+});
+
+export {
+  tableData,
+  tableDataDrag,
+  tableDataMore,
+  tableDataEdit,
+  tableDataImage,
+  tableDataSortable
+};

src/views/testlist/index.vue

+<template>
+  <div class="test-list">
+    <h2>TestList</h2>
+    <h2>TestList</h2>
+    <h2>TestList</h2>
+    <!-- <slot /> -->
+  </div>
+  <!-- <template> -->
+  <!-- <div>
+    <pure-table
+      ref="tableRef"
+      border
+      adaptive
+      :adaptiveConfig="adaptiveConfig"
+      row-key="id"
+      alignWhole="center"
+      showOverflowTooltip
+      :loading="loading"
+      :loading-config="loadingConfig"
+      :data="
+        dataList.slice(
+          (pagination.currentPage - 1) * pagination.pageSize,
+          pagination.currentPage * pagination.pageSize
+        )
+      "
+      :columns="columns"
+      :pagination="pagination"
+      @page-size-change="onSizeChange"
+      @page-current-change="onCurrentChange"
+    />
+  </div> -->
+</template>
+
+<script setup lang="ts">
+// 组件逻辑部分
+import { ref } from "vue";
+import { useColumns } from "./columns";
+
+const tableRef = ref();
+const count = ref(0);
+
+const increment = () => {
+  count.value++;
+};
+const {
+  loading,
+  columns,
+  dataList,
+  pagination,
+  loadingConfig,
+  adaptiveConfig,
+  onSizeChange,
+  onCurrentChange
+} = useColumns();
+</script>
+
+<style scoped lang="scss">
+.test-list {
+  padding: 20px;
+  border: 1px solid #ccc;
+}
+</style>