diff --git a/packages/hooks/src/use-table.ts b/packages/hooks/src/use-table.ts
index 6c2ae07cf..2de1c0efd 100644
--- a/packages/hooks/src/use-table.ts
+++ b/packages/hooks/src/use-table.ts
@@ -57,6 +57,12 @@ export type TableConfig = {
* @default true
*/
immediate?: boolean;
+ /**
+ * whether to display the total items count
+ *
+ * @default false
+ */
+ showTotal?: boolean;
};
export default function useHookTable(config: TableConfig) {
diff --git a/src/hooks/common/table.ts b/src/hooks/common/table.ts
index c83bbbceb..38328b0d4 100644
--- a/src/hooks/common/table.ts
+++ b/src/hooks/common/table.ts
@@ -13,7 +13,9 @@ export function useTable(config: NaiveUI.NaiveTabl
const scope = effectScope();
const appStore = useAppStore();
- const { apiFn, apiParams, immediate } = config;
+ const isMobile = computed(() => appStore.isMobile);
+
+ const { apiFn, apiParams, immediate, showTotal } = config;
const SELECTION_KEY = '__selection__';
@@ -124,14 +126,20 @@ export function useTable(config: NaiveUI.NaiveTabl
});
getData();
- }
+ },
+ ...(showTotal
+ ? {
+ prefix: page => $t('datatable.itemCount', { total: page.itemCount })
+ }
+ : {})
});
// this is for mobile, if the system does not support mobile, you can use `pagination` directly
const mobilePagination = computed(() => {
const p: PaginationProps = {
...pagination,
- pageSlot: appStore.isMobile ? 3 : 9
+ pageSlot: isMobile.value ? 3 : 9,
+ prefix: !isMobile.value && showTotal ? pagination.prefix : undefined
};
return p;
diff --git a/src/locales/langs/en-us.ts b/src/locales/langs/en-us.ts
index fcd534bbc..57a5255e3 100644
--- a/src/locales/langs/en-us.ts
+++ b/src/locales/langs/en-us.ts
@@ -446,6 +446,9 @@ const local: App.I18n.Schema = {
expand: 'Expand Menu',
pin: 'Pin',
unpin: 'Unpin'
+ },
+ datatable: {
+ itemCount: 'Total {total} items'
}
};
diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts
index 5536fe696..4bd288250 100644
--- a/src/locales/langs/zh-cn.ts
+++ b/src/locales/langs/zh-cn.ts
@@ -446,6 +446,9 @@ const local: App.I18n.Schema = {
expand: '展开菜单',
pin: '固定',
unpin: '取消固定'
+ },
+ datatable: {
+ itemCount: '共 {total} 条'
}
};
diff --git a/src/typings/app.d.ts b/src/typings/app.d.ts
index 48baaccc9..49d054c76 100644
--- a/src/typings/app.d.ts
+++ b/src/typings/app.d.ts
@@ -605,6 +605,9 @@ declare namespace App {
pin: string;
unpin: string;
};
+ datatable: {
+ itemCount: string;
+ };
};
type GetI18nKey, K extends keyof T = keyof T> = K extends string
diff --git a/src/typings/naive-ui.d.ts b/src/typings/naive-ui.d.ts
index 9a7d923f0..6bd5f4cfc 100644
--- a/src/typings/naive-ui.d.ts
+++ b/src/typings/naive-ui.d.ts
@@ -42,6 +42,6 @@ declare namespace NaiveUI {
type NaiveTableConfig = Pick<
import('@sa/hooks').TableConfig, TableColumn>>>,
- 'apiFn' | 'apiParams' | 'columns' | 'immediate'
+ 'apiFn' | 'apiParams' | 'columns' | 'immediate' | 'showTotal'
>;
}
diff --git a/src/views/manage/user/index.vue b/src/views/manage/user/index.vue
index 9120e1edc..c7b3423ca 100644
--- a/src/views/manage/user/index.vue
+++ b/src/views/manage/user/index.vue
@@ -12,6 +12,7 @@ const appStore = useAppStore();
const { columns, columnChecks, data, getData, loading, mobilePagination, searchParams, resetSearchParams } = useTable({
apiFn: fetchGetUserList,
+ showTotal: true,
apiParams: {
current: 1,
size: 10,