feat: 新组件ReVxeTableBar搭配vxe-table使用 (#1087)

src/views/table/virtual/list.tsx

@@ -1,5 +1,6 @@
 import List from "./list.vue";
 import TreeList from "./treeList.vue";
+import PageList from "./pageList.vue";
 
 const rendContent = (val: string) =>
   `代码位置：src/views/table/virtual/${val}.vue`;
@@ -8,13 +9,19 @@ export const list = [
   {
     key: "list",
     content: rendContent("list"),
-    title: "虚拟列表",
+    title: "虚拟表格",
     component: List
   },
   {
     key: "treeList",
     content: rendContent("treeList"),
-    title: "虚拟树",
+    title: "虚拟树形表格",
     component: TreeList
+  },
+  {
+    key: "pageList",
+    content: rendContent("pageList"),
+    title: "分页表格",
+    component: PageList
   }
 ];

src/views/table/virtual/list.vue

@@ -1,9 +1,20 @@
 <script lang="ts" setup>
 import { ref } from "vue";
+import { VxeTableBar } from "@/components/ReVxeTableBar";
 
+const vxeTableRef = ref();
+const loading = ref(true);
 const tableData = ref([]);
 
-setTimeout(() => {
+const columns = [
+  { type: "seq", field: "seq", title: "序号", width: 100 },
+  { field: "name", title: "名称", sortable: true },
+  { field: "role", title: "角色" },
+  { field: "sex", title: "性别" }
+];
+
+async function onSearch() {
+  loading.value = true;
   // 模拟数据
   const mockList = [];
   for (let index = 0; index < 500; index++) {
@@ -15,21 +26,33 @@ setTimeout(() => {
     });
   }
   tableData.value = mockList;
-}, 100);
+  setTimeout(() => {
+    loading.value = false;
+  }, 500);
+}
+
+onSearch();
 </script>
 
 <template>
-  <vxe-table
-    border
-    show-overflow
-    height="500"
-    :row-config="{ isHover: true }"
-    :data="tableData"
-    :scroll-y="{ enabled: true }"
+  <VxeTableBar
+    :vxeTableRef="vxeTableRef"
+    :columns="columns"
+    title="虚拟表格"
+    @refresh="onSearch"
   >
-    <vxe-column type="seq" title="序号" width="100" />
-    <vxe-column field="name" title="名称" sortable />
-    <vxe-column field="role" title="角色" />
-    <vxe-column field="sex" title="性别" />
-  </vxe-table>
+    <template v-slot="{ size, dynamicColumns }">
+      <vxe-grid
+        ref="vxeTableRef"
+        v-loading="loading"
+        show-overflow
+        height="500"
+        :size="size"
+        :row-config="{ isHover: true }"
+        :scroll-y="{ enabled: true }"
+        :columns="dynamicColumns"
+        :data="tableData"
+      />
+    </template>
+  </VxeTableBar>
 </template>

src/views/table/virtual/pageList.vue

@@ -0,0 +1,86 @@
+<script lang="ts" setup>
+import { ref, reactive, computed } from "vue";
+import { VxeTableBar } from "@/components/ReVxeTableBar";
+
+const vxeTableRef = ref();
+const loading = ref(true);
+const tableData = ref([]);
+
+const getTableHeight = computed(() => {
+  return (size: string) => {
+    switch (size) {
+      case "medium":
+        return 531;
+      case "small":
+        return 482;
+      case "mini":
+        return 433;
+    }
+  };
+});
+
+const pagerConfig = reactive({
+  total: 0,
+  currentPage: 1,
+  pageSize: 10,
+  pageSizes: [5, 10, 15, 20]
+});
+
+const columns = [
+  { type: "seq", field: "seq", title: "序号", width: 100 },
+  { field: "name", title: "名称", sortable: true },
+  { field: "role", title: "角色" },
+  { field: "sex", title: "性别" }
+];
+
+async function onSearch() {
+  loading.value = true;
+  // 模拟数据
+  const mockList = [];
+  for (let index = 0; index < 10; index++) {
+    mockList.push({
+      id: index,
+      name: "Test" + index,
+      role: "Developer",
+      sex: "男"
+    });
+  }
+  pagerConfig.total = 20;
+  tableData.value = mockList;
+  setTimeout(() => {
+    loading.value = false;
+  }, 500);
+}
+
+const handlePageChange = ({ currentPage, pageSize }) => {
+  pagerConfig.currentPage = currentPage;
+  pagerConfig.pageSize = pageSize;
+  onSearch();
+};
+
+onSearch();
+</script>
+
+<template>
+  <VxeTableBar
+    :vxeTableRef="vxeTableRef"
+    :columns="columns"
+    title="分页表格"
+    @refresh="onSearch"
+  >
+    <template v-slot="{ size, dynamicColumns }">
+      <vxe-grid
+        ref="vxeTableRef"
+        v-loading="loading"
+        show-overflow
+        :height="getTableHeight(size)"
+        :size="size"
+        :column-config="{ resizable: true }"
+        :columns="dynamicColumns"
+        :pagerConfig="pagerConfig"
+        :data="tableData"
+        @page-change="handlePageChange"
+      />
+    </template>
+  </VxeTableBar>
+</template>

src/views/table/virtual/treeList.vue

@@ -1,56 +1,51 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 import treeList from "./tree.json";
+import { VxeTableBar } from "@/components/ReVxeTableBar";
 
-const tableRef = ref();
+const vxeTableRef = ref();
 
-const loading = ref(false);
+const loading = ref(true);
 const tableData = ref([]);
 
-const loadList = () => {
+const columns = [
+  { type: "seq", field: "seq", title: "序号", width: 200, treeNode: true },
+  { field: "id", title: "Id" },
+  { field: "name", title: "地点" }
+];
+
+async function onSearch() {
   loading.value = true;
+  tableData.value = treeList;
   setTimeout(() => {
-    tableData.value = treeList;
     loading.value = false;
-  }, 200);
-};
+  }, 500);
+}
 
-const expandAllEvent = () => {
-  const $table = tableRef.value;
-  if ($table) {
-    $table.setAllTreeExpand(true);
-  }
-};
-
-const claseExpandEvent = () => {
-  const $table = tableRef.value;
-  if ($table) {
-    $table.clearTreeExpand();
-  }
-};
-
-loadList();
+onSearch();
 </script>
 
 <template>
-  <div>
-    <div class="mb-4">
-      <el-button @click="expandAllEvent">展开所有</el-button>
-      <el-button @click="claseExpandEvent">收起所有</el-button>
-    </div>
-
-    <vxe-table
-      ref="tableRef"
-      show-overflow
-      height="500"
-      :loading="loading"
-      :tree-config="{ transform: true }"
-      :scroll-y="{ enabled: true, gt: 20 }"
-      :data="tableData"
-    >
-      <vxe-column type="seq" title="序号" width="200" tree-node />
-      <vxe-column field="id" title="Id" />
-      <vxe-column field="name" title="地点" />
-    </vxe-table>
-  </div>
+  <VxeTableBar
+    tree
+    title="虚拟树形表格"
+    :isExpandAll="false"
+    :vxeTableRef="vxeTableRef"
+    :columns="columns"
+    @refresh="onSearch"
+  >
+    <template v-slot="{ size, dynamicColumns }">
+      <vxe-grid
+        ref="vxeTableRef"
+        v-loading="loading"
+        show-overflow
+        height="500"
+        :size="size"
+        :tree-config="{ transform: true }"
+        :scroll-y="{ enabled: true, gt: 20 }"
+        :columns="dynamicColumns"
+        :data="tableData"
+      />
+    </template>
+  </VxeTableBar>
 </template>