diff --git a/gpt-vue/projects/vue-admin/src/components/SimpleTable/SimpleTable.vue b/gpt-vue/projects/vue-admin/src/components/SimpleTable/SimpleTable.vue
new file mode 100644
index 00000000..e235a986
--- /dev/null
+++ b/gpt-vue/projects/vue-admin/src/components/SimpleTable/SimpleTable.vue
@@ -0,0 +1,67 @@
+
+
+
+
+
diff --git a/gpt-vue/projects/vue-admin/src/components/SimpleTable/useAsyncTable.ts b/gpt-vue/projects/vue-admin/src/components/SimpleTable/useAsyncTable.ts
new file mode 100644
index 00000000..73b5addd
--- /dev/null
+++ b/gpt-vue/projects/vue-admin/src/components/SimpleTable/useAsyncTable.ts
@@ -0,0 +1,43 @@
+import { computed, onMounted, reactive, unref } from "vue";
+import type { TableInstance } from "@arco-design/web-vue";
+import type { BaseResponse } from "@gpt-vue/packages/type";
+
+export type TableOriginalProps = TableInstance["$props"];
+export type TableRequest> = (
+ params?: any
+) => Promise>;
+export type TableReturn = [TableOriginalProps, () => Promise];
+function useAsyncTable>(
+ request: TableRequest,
+ params?: Record
+): TableReturn {
+ const tableState = reactive<{ loading: Boolean; data: T[] }>({
+ loading: false,
+ data: [],
+ });
+
+ const tableConfig = computed(() => {
+ return {
+ ...tableState,
+ rowKey: "id",
+ };
+ });
+
+ const getTableData = async () => {
+ tableState.loading = true;
+ try {
+ const { data } = await request({
+ ...unref(params ?? {}),
+ });
+ tableState.data = data as any;
+ } finally {
+ tableState.loading = false;
+ }
+ };
+
+ onMounted(getTableData);
+
+ return [tableConfig, getTableData] as TableReturn;
+}
+
+export default useAsyncTable;