perf: 翻页后自动滚动到顶部

#232
fast-crud · Sep 2, 2023 · a6e5f67 · a6e5f67
1 parent f4d0bcb
commit a6e5f67
Show file tree

Hide file tree

Showing 13 changed files with 45 additions and 8 deletions.
diff --git a/packages/fast-admin/fs-admin-antdv b/packages/fast-admin/fs-admin-antdv
diff --git a/packages/fast-admin/fs-admin-antdv4 b/packages/fast-admin/fs-admin-antdv4
diff --git a/packages/fast-admin/fs-admin-element b/packages/fast-admin/fs-admin-element
diff --git a/packages/fast-admin/fs-admin-naive-ui b/packages/fast-admin/fs-admin-naive-ui
diff --git a/packages/fast-crud/src/components/crud/fs-table.tsx b/packages/fast-crud/src/components/crud/fs-table.tsx
@@ -1,6 +1,8 @@
 import {
   computed,
   defineComponent,
+  getCurrentInstance,
+  getCurrentScope,
   PropType,
   ref,
   resolveDirective,
@@ -275,16 +277,23 @@ export default defineComponent({
       return cellRef?.getTargetRef();
     };
 
+    const { ui } = useUi();
+
+    const currentRef = getCurrentInstance();
     watch(
       () => {
         return props.data;
       },
       (value) => {
+        ui.table.scrollTo({
+          top: 0,
+          tableRef,
+          fsTableRef: currentRef
+        });
         ctx.emit("data-change", { data: value });
       }
     );
 
-    const { ui } = useUi();
     const tableComp = resolveDynamicComponent(ui.table.name);
     const tableColumnCI = ui.tableColumn;
 

diff --git a/packages/fast-crud/src/use/use-expose.ts b/packages/fast-crud/src/use/use-expose.ts
@@ -1,4 +1,4 @@
-import { Ref, toRaw } from "vue";
+import { nextTick, Ref, toRaw } from "vue";
 import {
   CrudExpose,
   Editable,
@@ -385,7 +385,6 @@ export function useExpose(props: UseExposeProps): UseExposeRet {
         );
         return;
       }
-
       crudBinding.value.data = records;
       if (crudBinding.value.pagination) {
         crudBinding.value.pagination[ui.pagination.currentPage] = currentPage;

diff --git a/packages/ui/ui-antdv/src/antdv.tsx b/packages/ui/ui-antdv/src/antdv.tsx
@@ -48,6 +48,7 @@ import {
   SwitchCI,
   TableCI,
   TableColumnCI,
+  TableScrollReq,
   TabPaneCI,
   TabsCI,
   TagCI,
@@ -489,6 +490,13 @@ export class Antdv implements UiInterface {
     fixedHeaderNeedComputeBodyHeight: true,
     headerDomSelector: ".ant-table-thead",
     vLoading: false,
+    scrollTo(req: TableScrollReq) {
+      try {
+        req.fsTableRef.vnode.el.querySelector(".ant-table-body").scrollTop = req.top;
+      } catch (e) {
+        console.error("scroll to top error:", e);
+      }
+    },
     onChange({ onSortChange, onFilterChange, onPagination, bubbleUp }) {
       return {
         onChange: (pagination: any, filters: any, sorter: any, ctx: any) => {

diff --git a/packages/ui/ui-antdv4/.eslintrc.js b/packages/ui/ui-antdv4/.eslintrc.js
@@ -24,6 +24,7 @@ module.exports = {
   ],
   rules: {
     // "comma-dangle": "off",
+    "@typescript-eslint/no-unused-vars": "off",
     "max-len": [0, 160, 2, { ignoreUrls: true }],
     "@typescript-eslint/ban-ts-ignore": "off",
     "@typescript-eslint/explicit-function-return-type": "off",

diff --git a/packages/ui/ui-antdv4/src/antdv.tsx b/packages/ui/ui-antdv4/src/antdv.tsx
@@ -48,6 +48,7 @@ import {
   SwitchCI,
   TableCI,
   TableColumnCI,
+  TableScrollReq,
   TabPaneCI,
   TabsCI,
   TagCI,
@@ -489,6 +490,13 @@ export class Antdv implements UiInterface {
     fixedHeaderNeedComputeBodyHeight: true,
     headerDomSelector: ".ant-table-thead",
     vLoading: false,
+    scrollTo(req: TableScrollReq) {
+      try {
+        req.fsTableRef.vnode.el.querySelector(".ant-table-body").scrollTop = req.top;
+      } catch (e) {
+        console.error("scroll to top error:", e);
+      }
+    },
     onChange({ onSortChange, onFilterChange, onPagination, bubbleUp }) {
       return {
         onChange: (pagination: any, filters: any, sorter: any, ctx: any) => {

diff --git a/packages/ui/ui-element/src/element.tsx b/packages/ui/ui-element/src/element.tsx
@@ -53,7 +53,8 @@ import {
   ButtonGroupCI,
   ColCI,
   RowCI,
-  CardCI
+  CardCI,
+  TableScrollReq
 } from "@fast-crud/ui-interface";
 // @ts-ignore
 import _ from "lodash-es";
@@ -404,6 +405,9 @@ export class Element implements UiInterface {
     rebuildRenderScope: (scope) => {
       return scope;
     },
+    scrollTo(req: TableScrollReq) {
+      req.tableRef.value.setScrollTop(req.top);
+    },
     onChange({ onSortChange, onFilterChange, bubbleUp }) {
       return {
         onSortChange: (ctx: any) => {

diff --git a/packages/ui/ui-interface/src/ui-interface.ts b/packages/ui/ui-interface/src/ui-interface.ts
@@ -192,6 +192,7 @@ export type TableSorterContext = {
   asc: boolean;
 };
 export type TableBuilderOption = {} & BindBuilderOptions;
+export type TableScrollReq = { top: number; tableRef: any; fsTableRef: any };
 export interface TableCI extends CI<TableBuilderOption> {
   defaultRowKey?: string | ((rowData: any) => any);
   data: string;
@@ -213,6 +214,8 @@ export interface TableCI extends CI<TableBuilderOption> {
    * render 方法触发时的参数构建出一个scope
    */
   rebuildRenderScope?: (scope: any, prop2?: any, prop3?: any, prop4?: any) => ComponentBinding;
+
+  scrollTo(req: TableScrollReq): void;
 }
 
 export type CheckboxGroupBuilderOption = {} & BindBuilderOptions;

diff --git a/packages/ui/ui-naive/.eslintrc.js b/packages/ui/ui-naive/.eslintrc.js
@@ -25,6 +25,7 @@ module.exports = {
   rules: {
     // "comma-dangle": "off",
     // "max-len": [0, 160, 2, { ignoreUrls: true }],
+    "@typescript-eslint/no-unused-vars": "off",
     "@typescript-eslint/ban-ts-ignore": "off",
     "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/no-explicit-any": "off",

diff --git a/packages/ui/ui-naive/src/naive.tsx b/packages/ui/ui-naive/src/naive.tsx
@@ -44,6 +44,7 @@ import {
   SwitchCI,
   TableCI,
   TableColumnCI,
+  TableScrollReq,
   TabPaneCI,
   TabsCI,
   TagCI,
@@ -532,6 +533,9 @@ export class Naive implements UiInterface {
     fixedHeaderNeedComputeBodyHeight: true,
     headerDomSelector: ".n-data-table-thead",
     vLoading: false,
+    scrollTo(req: TableScrollReq) {
+      req.tableRef.value.scrollTo({ top: req.top });
+    },
     onChange({ onSortChange, onFilterChange, onPagination, bubbleUp }) {
       return {
         "onUpdate:filters": (filters: any, initiatorColumn: any) => {