Przeglądaj źródła

feat(table component): add 'expandRows' table action (#1537)

* fix(table component): add 'expandRows'

* feat(table component): add 'expandRows' table action
George Tan 3 lat temu
rodzic
commit
1dc6faf3e6

+ 6 - 1
src/components/Table/src/BasicTable.vue

@@ -199,7 +199,11 @@
 
       const { getRowClassName } = useTableStyle(getProps, prefixCls);
 
-      const { getExpandOption, expandAll, collapseAll } = useTableExpand(getProps, tableData, emit);
+      const { getExpandOption, expandAll, expandRows, collapseAll } = useTableExpand(
+        getProps,
+        tableData,
+        emit,
+      );
 
       const handlers: InnerHandlers = {
         onColumnsChange: (data: ColumnChangeParam[]) => {
@@ -300,6 +304,7 @@
         getShowPagination,
         setCacheColumnsByField,
         expandAll,
+        expandRows,
         collapseAll,
         scrollTo,
         getSize: () => {

+ 3 - 0
src/components/Table/src/hooks/useTable.ts

@@ -152,6 +152,9 @@ export function useTable(tableProps?: Props): [
     expandAll: () => {
       getTableInstance().expandAll();
     },
+    expandRows: (keys: string[]) => {
+      getTableInstance().expandRows(keys);
+    },
     collapseAll: () => {
       getTableInstance().collapseAll();
     },

+ 8 - 1
src/components/Table/src/hooks/useTableExpand.ts

@@ -37,6 +37,13 @@ export function useTableExpand(
     expandedRowKeys.value = keys;
   }
 
+  function expandRows(keys: string[]) {
+    // use row ID expands the specified table row
+    const { isTreeTable } = unref(propsRef);
+    if (!isTreeTable) return;
+    expandedRowKeys.value = [...expandedRowKeys.value, ...keys];
+  }
+
   function getAllKeys(data?: Recordable[]) {
     const keys: string[] = [];
     const { childrenColumnName } = unref(propsRef);
@@ -54,5 +61,5 @@ export function useTableExpand(
     expandedRowKeys.value = [];
   }
 
-  return { getExpandOption, expandAll, collapseAll };
+  return { getExpandOption, expandAll, expandRows, collapseAll };
 }

+ 1 - 0
src/components/Table/src/types/table.ts

@@ -87,6 +87,7 @@ export interface TableActionType {
   getSelectRows: <T = Recordable>() => T[];
   clearSelectedRowKeys: () => void;
   expandAll: () => void;
+  expandRows: (keys: string[]) => void;
   collapseAll: () => void;
   scrollTo: (pos: string) => void; // pos: id | "top" | "bottom"
   getSelectRowKeys: () => string[];