From c2c9d9d0f95ea6b8814060d5d3994a2c8b403c00 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9C=9F=E8=B4=A4?= Date: Tue, 13 Sep 2022 19:48:28 +0800 Subject: [PATCH] fix(table): fix configuration issues with nested columns --- .../src/components/ColumnSetting/index.tsx | 37 +++++++++++++------ packages/table/src/container.tsx | 7 ++-- 2 files changed, 28 insertions(+), 16 deletions(-) diff --git a/packages/table/src/components/ColumnSetting/index.tsx b/packages/table/src/components/ColumnSetting/index.tsx index 71cc886a3b9c..b4a1c5bc892c 100644 --- a/packages/table/src/components/ColumnSetting/index.tsx +++ b/packages/table/src/components/ColumnSetting/index.tsx @@ -132,14 +132,16 @@ const CheckboxList: React.FC<{ const treeDataConfig = useMemo(() => { if (!show) return {}; const checkedKeys: string[] = []; + const treeMap = new Map(); const loopData = (data: any[], parentConfig?: ColumnsState): DataNode[] => data.map(({ key, dataIndex, children, ...rest }) => { const columnKey = genColumnKey(key, rest.index); const config = columnsMap[columnKey || 'null'] || { show: true }; - if (config.show !== false && parentConfig?.show !== false && !children) { + if (config.show !== false && !children) { checkedKeys.push(columnKey); } + const item: DataNode = { key: columnKey, ...omit(rest, ['className']), @@ -151,10 +153,19 @@ const CheckboxList: React.FC<{ }; if (children) { item.children = loopData(children, config); + // 如果children 已经全部是show了,把自己也设置为show + if ( + item.children?.every((childrenItem) => + checkedKeys?.includes(childrenItem.key as string), + ) + ) { + checkedKeys.push(columnKey); + } } + treeMap.set(key, item); return item; }); - return { list: loopData(list), keys: checkedKeys }; + return { list: loopData(list), keys: checkedKeys, map: treeMap }; }, [columnsMap, list, show]); /** 移动到指定的位置 */ @@ -184,21 +195,23 @@ const CheckboxList: React.FC<{ /** 选中反选功能 */ const onCheckTree = useRefFunction((e) => { - const columnKey = e.node.key; - const newSetting = { ...columnsMap[columnKey] }; - - newSetting.show = e.checked; - - setColumnsMap({ - ...columnsMap, - [columnKey]: newSetting, - }); + const newColumnMap = { ...columnsMap }; + const loopSetShow = (key: string | number) => { + const newSetting = { ...newColumnMap[key] }; + newSetting.show = e.checked; + // 如果含有子节点,也要选中 + if (treeDataConfig.map?.get(key)?.children) { + treeDataConfig.map?.get(key)?.children?.forEach((item) => loopSetShow(item.key)); + } + newColumnMap[key] = newSetting; + }; + loopSetShow(e.node.key); + setColumnsMap({ ...newColumnMap }); }); if (!show) { return null; } - const listDom = ( { prefixNameRef.current = name; }, - setColumnsMap, columns: props.columns, rootDomRef,