1.9.0

src/components/Table/src/components/TableAction.vue

@@ -2,7 +2,7 @@
   <div class="tableAction">
     <div class="flex items-center justify-center">
       <template v-for="(action, index) in getActions" :key="`${index}-${action.label}`">
-        <n-button v-bind="action" class="mx-2">
+        <n-button v-bind="action" class="mx-1">
           {{ action.label }}
           <template #icon v-if="action.hasOwnProperty('icon')">
             <n-icon :component="action.icon" />
@@ -16,7 +16,7 @@
         @select="select"
       >
         <slot name="more"></slot>
-        <n-button v-bind="getMoreProps" class="mx-2" v-if="!$slots.more" icon-placement="right">
+        <n-button v-bind="getMoreProps" class="mx-1" v-if="!$slots.more" icon-placement="right">
           <div class="flex items-center">
             <span>更多</span>
             <n-icon size="14" class="ml-1">

src/components/Table/src/components/editable/EditableCell.vue

@@ -17,7 +17,7 @@
           :class="getWrapperClass"
           ref="elRef"
           @options-change="handleOptionsChange"
-          @pressEnter="handleEnter"
+          @press-enter="handleEnter"
         />
       </div>
       <div class="editable-cell-action" v-if="!getRowEditable">

src/components/Table/src/hooks/useDataSource.ts

@@ -31,8 +31,8 @@ export function useDataSource(
     return rowKey
       ? rowKey
       : () => {
-        return 'key';
-      };
+          return 'key';
+        };
   });
 
   const getDataSourceRef = computed(() => {
@@ -53,7 +53,7 @@ export function useDataSource(
       const sizeField = APISETTING.sizeField;
       const totalField = APISETTING.totalField;
       const listField = APISETTING.listField;
-
+      const itemCount = APISETTING.countField;
       let pageParams = {};
       const { page = 1, pageSize = 10 } = unref(getPaginationInfo) as PaginationProps;
 
@@ -66,23 +66,27 @@ export function useDataSource(
 
       let params = {
         ...pageParams,
+        ...opt,
       };
       if (beforeRequest && isFunction(beforeRequest)) {
         // The params parameter can be modified by outsiders
         params = (await beforeRequest(params)) || params;
       }
       const res = await request(params);
-
-      const resultTotal = res[totalField] || 0;
+      const resultTotal = res[totalField];
       const currentPage = res[pageField];
+      const total = res[itemCount];
+      const results = res[listField] ? res[listField] : [];
 
       // 如果数据异常，需获取正确的页码再次执行
       if (resultTotal) {
-        if (page > resultTotal) {
+        const currentTotalPage = Math.ceil(total / pageSize);
+        if (page > currentTotalPage) {
           setPagination({
-            [pageField]: resultTotal,
+            page: currentTotalPage,
+            itemCount: total,
           });
-          fetch(opt);
+          return await fetch(opt);
         }
       }
       let resultInfo = res[listField] ? res[listField] : [];
@@ -92,12 +96,13 @@ export function useDataSource(
       }
       dataSourceRef.value = resultInfo;
       setPagination({
-        [pageField]: currentPage,
-        [totalField]: resultTotal,
+        page: currentPage,
+        pageCount: resultTotal,
+        itemCount: total,
       });
       if (opt && opt[pageField]) {
         setPagination({
-          [pageField]: opt[pageField] || 1,
+          page: opt[pageField] || 1,
         });
       }
       emit('fetch-success', {
@@ -108,9 +113,9 @@ export function useDataSource(
       console.error(error);
       emit('fetch-error', error);
       dataSourceRef.value = [];
-      // setPagination({
-      //   pageCount: 0,
-      // });
+      setPagination({
+        pageCount: 0,
+      });
     } finally {
       setLoading(false);
     }

src/components/Table/src/hooks/usePagination.ts

@@ -1,28 +1,40 @@
 import type { PaginationProps } from '../types/pagination';
 import type { BasicTableProps } from '../types/table';
-import { computed, unref, ref, ComputedRef } from 'vue';
+import { computed, unref, ref, ComputedRef, watch } from 'vue';
 
 import { isBoolean } from '@/utils/is';
-import { APISETTING, DEFAULTPAGESIZE, PAGESIZES } from '../const';
+import { DEFAULTPAGESIZE, PAGESIZES } from '../const';
 
 export function usePagination(refProps: ComputedRef<BasicTableProps>) {
   const configRef = ref<PaginationProps>({});
   const show = ref(true);
 
+  watch(
+    () => unref(refProps).pagination,
+    (pagination) => {
+      if (!isBoolean(pagination) && pagination) {
+        configRef.value = {
+          ...unref(configRef),
+          ...(pagination ?? {}),
+        };
+      }
+    }
+  );
+
   const getPaginationInfo = computed((): PaginationProps | boolean => {
     const { pagination } = unref(refProps);
     if (!unref(show) || (isBoolean(pagination) && !pagination)) {
       return false;
     }
-    const { totalField } = APISETTING;
     return {
-      pageSize: DEFAULTPAGESIZE,
-      pageSizes: PAGESIZES,
+      page: 1, //当前页
+      pageSize: DEFAULTPAGESIZE, //分页大小
+      pageSizes: PAGESIZES, // 每页条数
       showSizePicker: true,
       showQuickJumper: true,
+      prefix: (pagingInfo) => `共 ${pagingInfo.itemCount} 条`, // 不需要可以通过 pagination 重置或者删除
       ...(isBoolean(pagination) ? {} : pagination),
       ...unref(configRef),
-      pageCount: unref(configRef)[totalField],
     };
   });
 

src/components/Table/src/types/componentType.ts

@@ -5,4 +5,5 @@ export type ComponentType =
   | 'NCheckbox'
   | 'NSwitch'
   | 'NDatePicker'
-  | 'NTimePicker';
+  | 'NTimePicker'
+  | 'NCascader';

src/components/Table/src/types/pagination.ts

@@ -1,8 +1,10 @@
 export interface PaginationProps {
-  page?: number;
-  pageCount?: number;
-  pageSize?: number;
-  pageSizes?: number[];
-  showSizePicker?: boolean;
-  showQuickJumper?: boolean;
+  page?: number; //受控模式下的当前页
+  itemCount?: number; //总条数
+  pageCount?: number; //总页数
+  pageSize?: number; //受控模式下的分页大小
+  pageSizes?: number[]; //每页条数， 可自定义
+  showSizePicker?: boolean; //是否显示每页条数的选择器
+  showQuickJumper?: boolean; //是否显示快速跳转
+  prefix?: any; //分页前缀
 }