perf: 服务端过滤示例

fast-crud · May 6, 2023 · 006bfb2 · 006bfb2
1 parent 748838a
commit 006bfb2
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 26 deletions.
diff --git a/packages/fast-crud/src/components/crud/fs-table.tsx b/packages/fast-crud/src/components/crud/fs-table.tsx
@@ -185,6 +185,7 @@ function buildTableColumns(options: any) {
  */
 export default defineComponent({
   name: "FsTable",
+  inheritAttrs: false,
   props: {
     /**
      * table插槽
@@ -296,6 +297,9 @@ export default defineComponent({
       },
       onPagination: (pagination: any) => {
         //
+      },
+      bubbleUp: (onChange) => {
+        onChange(ctx.attrs);
       }
     });
 
@@ -390,12 +394,15 @@ export default defineComponent({
       };
     });
 
+    const computedBinding = computed(() => {
+      return _.merge({}, ctx.attrs, events);
+    });
     if (renderMode === "slot") {
+      //使用slot column ，element-plus
       const computedTableSlots = computed(() => {
         return buildTableSlots({ props, ui, renderRowHandle, renderCellComponent } as BuildTableColumnsOption);
       });
 
-      // 使用config render
       return () => {
         if (props.show === false) {
           return;
@@ -404,9 +411,8 @@ export default defineComponent({
         const tableRender = (
           <tableComp
             ref={tableRef}
-            {...ctx.attrs}
             loading={props.loading}
-            {...events}
+            {...computedBinding.value}
             {...dataSource.value}
             v-slots={computedTableSlots.value}
           />
@@ -418,6 +424,7 @@ export default defineComponent({
         return tableRender;
       };
     } else {
+      //使用 jsx column
       const computedColumns = computed(() => {
         return buildTableColumns({
           props,
@@ -439,8 +446,7 @@ export default defineComponent({
           <tableComp
             ref={tableRef}
             loading={props.loading}
-            {...ctx.attrs}
-            {...events}
+            {...computedBinding.value}
             columns={computedColumns.value}
             {...dataSource.value}
             v-slots={props.slots}

diff --git a/packages/ui/ui-antdv/src/antdv.tsx b/packages/ui/ui-antdv/src/antdv.tsx
@@ -478,9 +478,10 @@ export class Antdv implements UiInterface {
     fixedHeaderNeedComputeBodyHeight: true,
     headerDomSelector: ".ant-table-thead",
     vLoading: false,
-    onChange({ onSortChange, onFilterChange, onPagination }) {
+    onChange({ onSortChange, onFilterChange, onPagination, bubbleUp }) {
       return {
-        onChange: (pagination: any, filters: any, sorter: any, { currentDataSource }: any) => {
+        onChange: (pagination: any, filters: any, sorter: any, ctx: any) => {
+          const { currentDataSource } = ctx;
           if (pagination && onPagination) {
             onPagination({ ...pagination, data: currentDataSource });
           }
@@ -496,6 +497,12 @@ export class Antdv implements UiInterface {
               asc: order === "ascend"
             });
           }
+
+          bubbleUp((events: any) => {
+            if (events?.onChange) {
+              events.onChange(pagination, filters, sorter, ctx);
+            }
+          });
         }
       };
     }

diff --git a/packages/ui/ui-element/src/element.tsx b/packages/ui/ui-element/src/element.tsx
@@ -409,9 +409,10 @@ export class Element implements UiInterface {
     rebuildRenderScope: (scope) => {
       return scope;
     },
-    onChange({ onSortChange, onFilterChange }) {
+    onChange({ onSortChange, onFilterChange, bubbleUp }) {
       return {
-        onSortChange: ({ column, prop, order }: any) => {
+        onSortChange: (ctx: any) => {
+          const { column, prop, order } = ctx;
           if (!onSortChange) {
             return;
           }
@@ -421,8 +422,20 @@ export class Element implements UiInterface {
             order,
             asc: order === "ascending"
           });
+          bubbleUp((events: any) => {
+            if (events.onSortChange) {
+              events.onSortChange(ctx);
+            }
+          });
         },
-        onFilterChange
+        onFilterChange: (filters: any) => {
+          onFilterChange(filters);
+          bubbleUp((events: any) => {
+            if (events.onFilterChange) {
+              events.onFilterChange(filters);
+            }
+          });
+        }
       };
     }
   });
@@ -503,7 +516,7 @@ export class Element implements UiInterface {
     buildPreviewBind: ({ url, urls, previewUrl, previewUrls, index }) => {
       return { "preview-src-list": previewUrls, "initial-index": index };
     },
-    fallback:"error"
+    fallback: "error"
   });
   progress: ProgressCI = creator<ProgressCI>({
     name: "el-progress"

diff --git a/packages/ui/ui-interface/src/ui-interface.ts b/packages/ui/ui-interface/src/ui-interface.ts
@@ -184,6 +184,10 @@ export type TableOnChangeBindingBuilder = (context: {
   onSortChange: (sorter: TableSorterContext) => void;
   onFilterChange: (filters: any) => void;
   onPagination: (pagination: any) => void;
+  /**
+   * 原始事件向上冒泡
+   */
+  bubbleUp(change: (events: any) => void): void;
 }) => any;
 
 export type ComponentBinding = {

diff --git a/packages/ui/ui-naive/src/naive.tsx b/packages/ui/ui-naive/src/naive.tsx
@@ -515,24 +515,28 @@ export class Naive implements UiInterface {
     fixedHeaderNeedComputeBodyHeight: true,
     headerDomSelector: ".n-data-table-thead",
     vLoading: false,
-    onChange({ onSortChange, onFilterChange, onPagination }) {
+    onChange({ onSortChange, onFilterChange, onPagination, bubbleUp }) {
       return {
-        onChange: (pagination: any, filters: any, sorter: any, { currentDataSource }: any) => {
-          if (pagination && onPagination) {
-            onPagination({ ...pagination, data: currentDataSource });
+        "onUpdate:filters": (filters: any, initiatorColumn: any) => {
+          if (onFilterChange) {
+            onFilterChange(filters);
           }
-          if (filters && onFilterChange) {
-            onFilterChange({ ...filters, data: currentDataSource });
-          }
-          if (sorter && onSortChange) {
-            const { column, field, order } = sorter;
-            onSortChange({
-              isServerSort: order && column.sorter === true,
-              prop: field,
-              order,
-              asc: order === "ascend"
-            });
+
+          bubbleUp((events: any) => {
+            if (events["onUpdate:sorter"]) {
+              events["onUpdate:sorter"](filters, initiatorColumn);
+            }
+          });
+        },
+        "onUpdate:sorter": (scope: any) => {
+          if (onSortChange) {
+            onSortChange(scope);
           }
+          bubbleUp((events: any) => {
+            if (events["onUpdate:sorter"]) {
+              events["onUpdate:sorter"](scope);
+            }
+          });
         }
       };
     }