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(, _mount_); 可以通过设置 indentSize 以控制每一层的缩进宽度 -> ⚠️ 注意: 树形数据展示和`expandable.expandedRowRender`请不要同时出现,后续或将支持 - - ```jsx import ReactDOM from 'react-dom'; @@ -805,7 +802,7 @@ const Demo = () => { ) @@ -968,7 +965,8 @@ ReactDOM.render(, _mount_); ### expandable -注意 expandedRowKeys 与 onExpandedRowsChange 必须成对出现 +> ⚠️ 注意: expandedRowKeys 与 onExpandedRowsChange 必须同时出现或不出现 + | 参数 | 说明 | 类型 | 默认值 | |--------- |-------- |--------- |-------- | 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(props: TableTr locationWidth, } = props; const [isOpacity, setIsOpacity] = useState(false); + const [childrenIndex, setChildrenIndex] = useState(0); const [expandIndex, setExpandIndex] = useState>([]); 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(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(props: TableTr ); })} + {isExpandedDom(trData, rowNum)} {expandIndex.includes(key) && ( )} - {isExpandedDom(trData, rowNum)} ); })} 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(props: TablePro return finalLocationWidth.current; }; useEffect(() => { + const childKey = expandable?.childrenColumnName || 'children'; + const deep = (params: TableColumns) => { + const arr1: Array = []; + 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) {