From 55219d564d03a9b3154e59c90b4739742eb2aad9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B4=94=E5=85=B0=E9=91=AB?= <1192065030@qq.com>
Date: Tue, 22 Mar 2022 18:02:00 +0800
Subject: [PATCH] =?UTF-8?q?feat(Table):=20Table=20=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E6=A0=91=E5=BD=A2=E6=95=B0=E6=8D=AE=E6=98=BE=E7=A4=BA=E5=92=8C?=
 =?UTF-8?q?=E5=8F=AF=E5=B1=95=E5=BC=80=E5=90=8C=E6=97=B6=E5=87=BA=E7=8E=B0?=
 =?UTF-8?q?=20(#703)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/react-table/README.md       |  8 +++-----
 packages/react-table/src/TableTr.tsx |  6 ++++--
 packages/react-table/src/index.tsx   | 13 ++++++++++++-
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/packages/react-table/README.md b/packages/react-table/README.md
index 0fc5d69ad8..de95f97d6c 100644
--- a/packages/react-table/README.md
+++ b/packages/react-table/README.md
@@ -729,9 +729,6 @@ ReactDOM.render(<Demo />, _mount_);
 
 可以通过设置 indentSize 以控制每一层的缩进宽度
 
-> ⚠️ 注意: 树形数据展示和`expandable.expandedRowRender`请不要同时出现，后续或将支持
-<!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;-->
-
 <!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
 ```jsx
 import ReactDOM from 'react-dom';
@@ -805,7 +802,7 @@ const Demo = () => {
       <Table 
         rowKey="id"
         columns={columns}
-        data={dataSource} 
+        data={dataSource}
       />
     </div>
   )
@@ -968,7 +965,8 @@ ReactDOM.render(<Demo />, _mount_);
 
 ### expandable
 
-注意 expandedRowKeys 与 onExpandedRowsChange 必须成对出现
+> ⚠️ 注意: expandedRowKeys 与 onExpandedRowsChange 必须同时出现或不出现
+<!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;-->
 
 | 参数 | 说明 | 类型 | 默认值 |
 |--------- |-------- |--------- |-------- |
diff --git a/packages/react-table/src/TableTr.tsx b/packages/react-table/src/TableTr.tsx
index ce05e5c540..2f1d2d7cff 100644
--- a/packages/react-table/src/TableTr.tsx
+++ b/packages/react-table/src/TableTr.tsx
@@ -38,9 +38,11 @@ export default function TableTr<T extends { [key: string]: any }>(props: TableTr
     locationWidth,
   } = props;
   const [isOpacity, setIsOpacity] = useState(false);
+  const [childrenIndex, setChildrenIndex] = useState(0);
   const [expandIndex, setExpandIndex] = useState<Array<T[keyof T] | number>>([]);
   useEffect(() => {
     setIsOpacity(!!data?.find((it) => it[childrenColumnName]));
+    setChildrenIndex(keys?.findIndex((it) => it.key === 'uiw-expanded') === -1 ? 0 : 1);
   }, [data]);
 
   const IconDom = useMemo(() => {
@@ -92,7 +94,7 @@ export default function TableTr<T extends { [key: string]: any }>(props: TableTr
                   }
                 }
                 const isHasChildren = Array.isArray(trData[childrenColumnName]);
-                if (colNum === 0 && (isOpacity || hierarchy || isHasChildren)) {
+                if (colNum === childrenIndex && (isOpacity || hierarchy || isHasChildren)) {
                   objs.children = (
                     <>
                       {IconDom(key, isHasChildren)}
@@ -126,10 +128,10 @@ export default function TableTr<T extends { [key: string]: any }>(props: TableTr
                 );
               })}
             </tr>
+            {isExpandedDom(trData, rowNum)}
             {expandIndex.includes(key) && (
               <TableTr {...props} data={trData[childrenColumnName]} hierarchy={hierarchy + 1} />
             )}
-            {isExpandedDom(trData, rowNum)}
           </React.Fragment>
         );
       })}
diff --git a/packages/react-table/src/index.tsx b/packages/react-table/src/index.tsx
index 445e4492ce..1a2fc640bc 100644
--- a/packages/react-table/src/index.tsx
+++ b/packages/react-table/src/index.tsx
@@ -131,9 +131,20 @@ export default function Table<T extends { [key: string]: V }, V>(props: TablePro
     return finalLocationWidth.current;
   };
   useEffect(() => {
+    const childKey = expandable?.childrenColumnName || 'children';
+    const deep = (params: TableColumns<T>) => {
+      const arr1: Array<T[keyof T] | number> = [];
+      const arr = params.map((it: T, index: number) => {
+        if (Array.isArray(it[childKey])) {
+          arr1.push(...deep(it[childKey]));
+        }
+        return rowKey ? it[rowKey] : index;
+      });
+      return [...arr1, ...arr];
+    };
     if (expandable) {
       if (expandable.defaultExpandAllRows) {
-        setExpandIndex(data.map((it, index) => (rowKey ? it[rowKey] : index)));
+        setExpandIndex(deep(data));
         return;
       }
       if (expandable.defaultExpandedRowKeys) {