feat(treeTable): add function collapseRows and demo (#3375)

* feat(treeTable): add function collapseRows and demo

src/components/Table/src/BasicTable.vue

@@ -207,7 +207,7 @@
 
   const { getRowClassName } = useTableStyle(getProps, prefixCls);
 
-  const { getExpandOption, expandAll, expandRows, collapseAll } = useTableExpand(
+  const { getExpandOption, expandAll, expandRows, collapseRows, collapseAll } = useTableExpand(
     getProps,
     tableData,
     emit,
@@ -308,8 +308,9 @@
     getShowPagination,
     setCacheColumnsByField,
     expandAll,
-    expandRows,
     collapseAll,
+    expandRows,
+    collapseRows,
     scrollTo,
     getSize: () => {
       return unref(getBindValues).size as SizeType;

src/components/Table/src/hooks/useTable.ts

@@ -156,11 +156,14 @@ export function useTable(tableProps?: Props): [
     expandAll: () => {
       getTableInstance().expandAll();
     },
+    collapseAll: () => {
+      getTableInstance().collapseAll();
+    },
     expandRows: (keys: Key[]) => {
       getTableInstance().expandRows(keys);
     },
-    collapseAll: () => {
+    collapseRows: (keys: Key[]) => {
-      getTableInstance().collapseAll();
+      getTableInstance().collapseRows(keys);
     },
     scrollTo: (pos: string) => {
       getTableInstance().scrollTo(pos);

src/components/Table/src/hooks/useTableExpand.ts

@@ -37,6 +37,10 @@ export function useTableExpand(
     expandedRowKeys.value = keys;
   }
 
+  function collapseAll() {
+    expandedRowKeys.value = [];
+  }
+
   function expandRows(keys: (string | number)[]) {
     // use row ID expands the specified table row
     const { isTreeTable } = unref(propsRef);
@@ -44,6 +48,13 @@ export function useTableExpand(
     expandedRowKeys.value = [...expandedRowKeys.value, ...keys];
   }
 
+  function collapseRows(keys: (string | number)[]) {
+    // use row ID collapses the specified table row
+    const { isTreeTable } = unref(propsRef);
+    if (!isTreeTable) return;
+    expandedRowKeys.value = unref(expandedRowKeys).filter((key) => !keys.includes(key));
+  }
+
   function getAllKeys(data?: Recordable[]) {
     const keys: string[] = [];
     const { childrenColumnName } = unref(propsRef);
@@ -57,9 +68,5 @@ export function useTableExpand(
     return keys;
   }
 
-  function collapseAll() {
+  return { getExpandOption, expandAll, collapseAll, expandRows, collapseRows };
-    expandedRowKeys.value = [];
-  }
-
-  return { getExpandOption, expandAll, expandRows, collapseAll };
 }

src/components/Table/src/types/table.ts

@@ -92,8 +92,9 @@ export interface TableActionType {
   getSelectRows: <T = Recordable>() => T[];
   clearSelectedRowKeys: () => void;
   expandAll: () => void;
-  expandRows: (keys: (string | number)[]) => void;
   collapseAll: () => void;
+  expandRows: (keys: (string | number)[]) => void;
+  collapseRows: (keys: (string | number)[]) => void;
   scrollTo: (pos: string) => void; // pos: id | "top" | "bottom"
   getSelectRowKeys: () => Key[];
   deleteSelectRowByKey: (key: string) => void;

src/views/demo/table/TreeTable.vue

@@ -4,6 +4,8 @@
       <template #toolbar>
         <a-button type="primary" @click="expandAll">展开全部</a-button>
         <a-button type="primary" @click="collapseAll">折叠全部</a-button>
+        <a-button type="primary" @click="collapseRows(['4'])">折叠第五行</a-button>
+        <a-button type="primary" @click="expandRows(['4'])">展开第五行</a-button>
       </template>
     </BasicTable>
   </div>
@@ -12,7 +14,7 @@
   import { BasicTable, useTable } from '@/components/Table';
   import { getBasicColumns, getTreeTableData } from './tableData';
 
-  const [register, { expandAll, collapseAll }] = useTable({
+  const [register, { expandAll, collapseAll, expandRows, collapseRows }] = useTable({
     title: '树形表格',
     isTreeTable: true,
     rowSelection: {