feat(table): add getRawDataSource() function (#1029)

vbenjs · Aug 4, 2021 · f3cf162 · f3cf162
1 parent 3819430
commit f3cf162
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 0 deletions.
diff --git a/src/components/Table/src/BasicTable.vue b/src/components/Table/src/BasicTable.vue
@@ -127,6 +127,7 @@
         handleTableChange: onTableChange,
         getDataSourceRef,
         getDataSource,
+        getRawDataSource,
         setTableData,
         updateTableDataRecord,
         findTableDataRecord,
@@ -273,6 +274,7 @@
         setColumns,
         setLoading,
         getDataSource,
+        getRawDataSource,
         setProps,
         getRowSelection,
         getPaginationRef: getPagination,

diff --git a/src/components/Table/src/hooks/useDataSource.ts b/src/components/Table/src/hooks/useDataSource.ts
@@ -47,6 +47,7 @@ export function useDataSource(
     filterInfo: {},
   });
   const dataSourceRef = ref<Recordable[]>([]);
+  const rawDataSourceRef = ref<Recordable>({});
 
   watchEffect(() => {
     tableData.value = unref(dataSourceRef);
@@ -235,6 +236,7 @@ export function useDataSource(
       }
 
       const res = await api(params);
+      rawDataSourceRef.value = res;
 
       const isArrayResult = Array.isArray(res);
 
@@ -287,6 +289,10 @@ export function useDataSource(
     return getDataSourceRef.value as T[];
   }
 
+  function getRawDataSource<T = Recordable>() {
+    return rawDataSourceRef.value as T;
+  }
+
   async function reload(opt?: FetchParams) {
     await fetch(opt);
   }
@@ -300,6 +306,7 @@ export function useDataSource(
   return {
     getDataSourceRef,
     getDataSource,
+    getRawDataSource,
     getRowKey,
     setTableData,
     getAutoCreateKey,

diff --git a/src/components/Table/src/hooks/useTable.ts b/src/components/Table/src/hooks/useTable.ts
@@ -82,6 +82,9 @@ export function useTable(tableProps?: Props): [
     getDataSource: () => {
       return getTableInstance().getDataSource();
     },
+    getRawDataSource: () => {
+      return getTableInstance().getRawDataSource();
+    },
     getColumns: ({ ignoreIndex = false }: { ignoreIndex?: boolean } = {}) => {
       const columns = getTableInstance().getColumns({ ignoreIndex }) || [];
       return toRaw(columns);

diff --git a/src/components/Table/src/types/table.ts b/src/components/Table/src/types/table.ts
@@ -99,6 +99,7 @@ export interface TableActionType {
   getColumns: (opt?: GetColumnsParams) => BasicColumn[];
   setColumns: (columns: BasicColumn[] | string[]) => void;
   getDataSource: <T = Recordable>() => T[];
+  getRawDataSource: <T = Recordable>() => T;
   setLoading: (loading: boolean) => void;
   setProps: (props: Partial<BasicTableProps>) => void;
   redoHeight: () => void;

diff --git a/src/views/demo/table/RefTable.vue b/src/views/demo/table/RefTable.vue
@@ -6,6 +6,7 @@
       <a-button class="mr-2" @click="changeColumns"> 更改Columns </a-button>
       <a-button class="mr-2" @click="getColumn"> 获取Columns </a-button>
       <a-button class="mr-2" @click="getTableData"> 获取表格数据 </a-button>
+      <a-button class="mr-2" @click="getTableRawData"> 获取接口原始数据 </a-button>
       <a-button class="mr-2" @click="setPaginationInfo"> 跳转到第2页 </a-button>
     </div>
     <div class="mb-4">
@@ -71,6 +72,10 @@
         createMessage.info('请在控制台查看！');
         console.log(getTableAction().getDataSource());
       }
+      function getTableRawData() {
+        createMessage.info('请在控制台查看！');
+        console.log(getTableAction().getRawDataSource());
+      }
 
       function getPagination() {
         createMessage.info('请在控制台查看！');
@@ -107,6 +112,7 @@
         reloadTable,
         getColumn,
         getTableData,
+        getTableRawData,
         getPagination,
         setPaginationInfo,
         getSelectRowList,

diff --git a/src/views/demo/table/UseTable.vue b/src/views/demo/table/UseTable.vue
@@ -6,6 +6,7 @@
       <a-button class="mr-2" @click="changeColumns"> 更改Columns </a-button>
       <a-button class="mr-2" @click="getColumn"> 获取Columns </a-button>
       <a-button class="mr-2" @click="getTableData"> 获取表格数据 </a-button>
+      <a-button class="mr-2" @click="getTableRawData"> 获取接口原始数据 </a-button>
       <a-button class="mr-2" @click="setPaginationInfo"> 跳转到第2页 </a-button>
     </div>
     <div class="mb-4">
@@ -38,6 +39,7 @@
           setColumns,
           getColumns,
           getDataSource,
+          getRawDataSource,
           reload,
           getPaginationRef,
           setPagination,
@@ -89,6 +91,11 @@
         console.log(getDataSource());
       }
 
+      function getTableRawData() {
+        createMessage.info('请在控制台查看！');
+        console.log(getRawDataSource());
+      }
+
       function getPagination() {
         createMessage.info('请在控制台查看！');
         console.log(getPaginationRef());
@@ -122,6 +129,7 @@
         reloadTable,
         getColumn,
         getTableData,
+        getTableRawData,
         getPagination,
         setPaginationInfo,
         getSelectRowList,