From e656b5d8dcde38deeedc73d713d2367e54d2893b Mon Sep 17 00:00:00 2001
From: zhang <zwtvip@qq.com>
Date: Mon, 4 Dec 2023 11:54:31 +0800
Subject: [PATCH] feat(treeTable): add function collapseRows and demo (#3375)

* feat(treeTable): add function collapseRows and demo
---
 src/components/Table/src/BasicTable.vue         |  5 +++--
 src/components/Table/src/hooks/useTable.ts      |  7 +++++--
 .../Table/src/hooks/useTableExpand.ts           | 17 ++++++++++++-----
 src/components/Table/src/types/table.ts         |  3 ++-
 src/views/demo/table/TreeTable.vue              |  4 +++-
 5 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/components/Table/src/BasicTable.vue b/src/components/Table/src/BasicTable.vue
index 154d98d9..1ce5a4ac 100644
--- a/src/components/Table/src/BasicTable.vue
+++ b/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;
diff --git a/src/components/Table/src/hooks/useTable.ts b/src/components/Table/src/hooks/useTable.ts
index 948ca325..6e22ecf3 100644
--- a/src/components/Table/src/hooks/useTable.ts
+++ b/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: () => {
-      getTableInstance().collapseAll();
+    collapseRows: (keys: Key[]) => {
+      getTableInstance().collapseRows(keys);
     },
     scrollTo: (pos: string) => {
       getTableInstance().scrollTo(pos);
diff --git a/src/components/Table/src/hooks/useTableExpand.ts b/src/components/Table/src/hooks/useTableExpand.ts
index 49fd2d98..caaa431d 100644
--- a/src/components/Table/src/hooks/useTableExpand.ts
+++ b/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() {
-    expandedRowKeys.value = [];
-  }
-
-  return { getExpandOption, expandAll, expandRows, collapseAll };
+  return { getExpandOption, expandAll, collapseAll, expandRows, collapseRows };
 }
diff --git a/src/components/Table/src/types/table.ts b/src/components/Table/src/types/table.ts
index 2cf37f1a..4ea071fd 100644
--- a/src/components/Table/src/types/table.ts
+++ b/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;
diff --git a/src/views/demo/table/TreeTable.vue b/src/views/demo/table/TreeTable.vue
index 29c807f6..0b8a7d7c 100644
--- a/src/views/demo/table/TreeTable.vue
+++ b/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: {