feat: pure-admin-table高级用法添加自适应内容区高度demo

locales/zh-CN.yaml

@@ -101,7 +101,7 @@ menus:
   hsInfiniteScroll: 表格无限滚动
   hsdanmaku: 弹幕组件
   hsPureTableBase: 基础用法（23个示例）
-  hsPureTableHigh: 高级用法（10个示例）
+  hsPureTableHigh: 高级用法（11个示例）
   hsTree: 大数据树业务组件
   hsMenuoverflow: 目录超出显示 Tooltip 文字提示
   hsChildMenuoverflow: 菜单超出显示 Tooltip 文字提示

package.json

@@ -34,7 +34,7 @@
     "@logicflow/core": "^1.2.7",
     "@logicflow/extension": "^1.2.7",
     "@pureadmin/descriptions": "^1.1.1",
-    "@pureadmin/table": "^2.3.0",
+    "@pureadmin/table": "^2.3.2",
     "@pureadmin/utils": "^1.9.2",
     "@vueuse/core": "^10.1.2",
     "@vueuse/motion": "^2.0.0",

pnpm-lock.yaml

@@ -12,7 +12,7 @@ specifiers:
   '@logicflow/core': ^1.2.7
   '@logicflow/extension': ^1.2.7
   '@pureadmin/descriptions': ^1.1.1
-  '@pureadmin/table': ^2.3.0
+  '@pureadmin/table': ^2.3.2
   '@pureadmin/theme': ^3.0.0
   '@pureadmin/utils': ^1.9.2
   '@types/element-resize-detector': 1.1.3
@@ -122,7 +122,7 @@ dependencies:
   '@logicflow/core': 1.2.8
   '@logicflow/extension': 1.2.8
   '@pureadmin/descriptions': 1.1.1_element-plus@2.3.6
-  '@pureadmin/table': 2.3.0_element-plus@2.3.6
+  '@pureadmin/table': 2.3.2_element-plus@2.3.6
   '@pureadmin/utils': 1.9.3_echarts@5.4.2+vue@3.3.4
   '@vueuse/core': 10.1.2_vue@3.3.4
   '@vueuse/motion': 2.0.0_vue@3.3.4
@@ -1659,8 +1659,8 @@ packages:
       vue: 3.3.4
     dev: false
 
-  /@pureadmin/table/2.3.0_element-plus@2.3.6:
-    resolution: {integrity: sha512-UxDsrq9fTDJ1B9XMnPvHNrjgob5fQccB5zFmLnMg2K68Jq0dVZsULlJDyx2LiaqQqcaE7gf/3uP14aLn7F8beQ==}
+  /@pureadmin/table/2.3.2_element-plus@2.3.6:
+    resolution: {integrity: sha512-oaMf8X4bv5KPcO4li+bO7W28BS5IMy+zxPpPNh/Tdxewc2dykvoqqpRIAiS8prJOHxI42/77xbjoGb+lwQH5aA==}
     peerDependencies:
       element-plus: ^2.0.0
     dependencies:

src/utils/mitt.ts

@@ -16,6 +16,7 @@ type Events = {
     indexPath: string;
     parentPath: string;
   };
+  setAdaptive: string;
 };
 
 export const emitter: Emitter<Events> = mitt<Events>();

src/views/pure-table/high.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { ref } from "vue";
 import { list } from "./high/list";
+import { ref, nextTick } from "vue";
+import { emitter } from "@/utils/mitt";
 
 defineOptions({
   name: "PureTableHigh"
@@ -9,6 +10,11 @@ defineOptions({
 const selected = ref(0);
 
 function tabClick({ index }) {
+  if (index == 0) {
+    nextTick(() => {
+      emitter.emit("setAdaptive");
+    });
+  }
   selected.value = index;
 }
 </script>

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

@@ -0,0 +1,105 @@
+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,
+    small: false
+  });
+
+  /** 加载动画配置 */
+  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/pure-table/high/adaptive/index.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { useColumns } from "./columns";
+import { emitter } from "@/utils/mitt";
+import { ref, onMounted, onBeforeUnmount } from "vue";
+
+const tableRef = ref();
+
+const {
+  loading,
+  columns,
+  dataList,
+  pagination,
+  loadingConfig,
+  adaptiveConfig,
+  onSizeChange,
+  onCurrentChange
+} = useColumns();
+
+onMounted(() => {
+  emitter.on("setAdaptive", () => {
+    // 设置表格自适应高度（用于表格外的元素高度改变或者元素隐藏时主动对表格进行自适应高度调整）
+    tableRef.value.setAdaptive();
+  });
+});
+
+onBeforeUnmount(() => {
+  // 解绑`setAdaptive`公共事件，防止多次触发
+  emitter.off("setAdaptive");
+});
+</script>
+
+<template>
+  <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"
+  />
+</template>

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

@@ -1,3 +1,4 @@
+import Adaptive from "./adaptive/index.vue";
 import Page from "./page/index.vue";
 import RowDrag from "./drag/row/index.vue";
 import ColumnDrag from "./drag/column/index.vue";
@@ -13,6 +14,12 @@ const rendContent = (val: string) =>
   `代码位置：src/views/pure-table/high/${val}/index.vue`;
 
 export const list = [
+  {
+    key: "adaptive",
+    content: rendContent("adaptive"),
+    title: "自适应内容区高度",
+    component: Adaptive
+  },
   {
     key: "page",
     content: rendContent("page"),