增加分组全选、展开

components/apolloTable/component/Cell.less

@@ -76,15 +76,42 @@
     .groupLevel {
         position: absolute;
         left: 0;
-        width: 100%;
-        overflow: hidden;
-        text-overflow: ellipsis;
+        min-width: 100%;
         white-space: nowrap;
         font-size: @textFontGen;
         height: 40px;
-        line-height: 40px;
         color: @textPrimaryColor;
         z-index: 5;
+        .groupContainer{
+            display: flex;
+            align-items: center;
+            height: 100%;
+            .groupCheck{
+                width: 16px;
+                margin-right: @marginSm;
+            }
+            .groupExpand{
+                width: 16px;
+                margin-right: @marginSm;
+                cursor: pointer;
+            }
+            .groupContent{
+                flex: 1;
+                overflow: hidden;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                font-size: @textFontSm;
+                .groupText{
+                    color: @textPrimaryColor;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+                .groupCount{
+                    color: @textSupplyColor;
+                }
+            }
+        }
     }
 }
 

components/apolloTable/component/Cell.tsx

@@ -2,6 +2,7 @@ import React, { useState, useRef } from 'react';
 import { Checkbox, message, Popover } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
+import memoizeOne from 'memoize-one';
 import { config } from './base/config';
 import { getFormat, setFormat } from './base';
 import s from './Cell.less';
@@ -11,7 +12,18 @@ import expandIcon from '../assets/extend.png';
 import { transferAttr } from './base/_utils/transferAttr';
 import { emptyModel } from './base/_utils/setFormatter';
 import { getGroupLevel } from '../utils/memCols';
+import IconFont from "@/submodule/components/IconFont/IconFont";
 
+// 获取数据列表的id
+const getArrIds = (arr: any) => {
+    if (!Array.isArray(arr)) {
+        return [];
+    }
+    return arr.map((item: any) => {
+        return item.id || item;
+    });
+};
+export const memoSelected = memoizeOne(getArrIds);
 enum EDIT_STATUS {
     'FREE', // 空闲
     'EDITING', // 编辑中
@@ -40,6 +52,8 @@ const Cell = (props: CellProps) => {
         maxPopHeight,
         renderFirstLeft,
         position,
+        toggleGroup,
+        dataSource,
     } = props;
     const {
         columnType,
@@ -51,16 +65,18 @@ const Cell = (props: CellProps) => {
         readOnlyFlag,
         columnAttrObj,
     } = columnConfig;
+    const { selectedRows } = rowSelection || {};
+    const selectIds = memoSelected(selectedRows);
     const cellUnit = useRef(null);
     const [status, setStatus] = useState('detail');
-
+    // 重置回详情状态
     const resetEditStatus = () => {
         setStatus('detail');
         if (typeof onEmitMsg === 'function') {
             onEmitMsg({ status: EDIT_STATUS.FREE });
         }
     };
-
+    // 进入编辑状态
     const turnIntoEditStatus = (data: any) => {
         setStatus('edit');
         if (typeof onEmitMsg === 'function') {
@@ -129,38 +145,73 @@ const Cell = (props: CellProps) => {
             dom.classList.remove(s.hover);
         });
     };
-
-    const renderFirst = () => {
-        const { current = 1, pageSize = 20 } = paginationConfig || {};
-        // 构造序号
-        const getIndex = () => {
-            if (typeof showIndex === 'function') {
-                return showIndex(props);
+    // 获取当前分组是否全部选中
+    const getGroupChecked = (level = 1) => {
+        const children = record[`group${level}Children`];
+        if (!children) {
+            return false;
+        }
+        for (let i = 0; i < children.length; i++) {
+            if (!selectIds.includes(children[i])) {
+                return false;
+            }
+        }
+        return true;
+    };
+    // 获取当前分组是否全部展开
+    const getGroupExpanded = (level = 1) => {
+        // 获取当前分组的数据id
+        const children = record[`group${level}Children`];
+        if (!children) {
+            return true;
+        }
+        for (let i = 0; i < children.length; i++) {
+            const item=dataSource.find(temp=>temp.id===children[i]);
+            if(item && !item.hidden){
+                return true;
+            }
+        }
+        return false;
+    };
+    // 切换当前分组全选/反选
+    const onToggleGroup=(level = 1) => {
+        const checked = getGroupChecked(level);
+        const { onChange } = rowSelection;
+        const children = record[`group${level}Children`];
+        if (typeof onChange === 'function') {
+            let data = [];
+            if (checked) {
+                data = selectIds.filter((s:number) => {
+                    return !children.includes(s);
+                });
+            } else {
+                data = children.filter((s:number) => {
+                    return !selectIds.includes(s);
+                });
+                data = data.concat(selectIds);
+            }
+            onChange(data);
+        }
+    };
+    // 切换当前分组展开/收起
+    const onToggleGroupClose = (level:number = 1) => {
+        const children = record[`group${level}Children`];
+        if (typeof toggleGroup === 'function') {
+            const flag = getGroupExpanded(level);
+            toggleGroup(children,flag);
         }
-            return (current - 1) * pageSize + rowIndex + 1;
     };
     // 获取当前行在所选列表中的index
     const getCheckedIndex = () => {
-            if (!rowSelection) {
-                return -1;
-            }
-            const { selectedRows } = rowSelection;
-            const index =
-                selectedRows &&
-                selectedRows.findIndex((item: any) => {
-                    return item.id === record.id;
+        return selectIds.findIndex((item: any) => {
+            return item === record.id;
         });
-            return index;
     };
-        // 构造行复选框
-        const getCheckbox = () => {
+    const onToggle = (index: number) => {
         const { selectedRows, onChange } = rowSelection;
-            const index = getCheckedIndex();
-            const checked = index > -1;
-            const onToggle = () => {
         if (typeof onChange === 'function') {
             const data = _.cloneDeep(selectedRows);
-                    if (checked) {
+            if (index > -1) {
                 data.splice(index, 1);
             } else {
                 data.push(record);
@@ -168,7 +219,21 @@ const Cell = (props: CellProps) => {
             onChange(data);
         }
     };
-            return <Checkbox checked={checked} onClick={onToggle} />;
+
+    const renderFirst = () => {
+        const { current = 1, pageSize = 20 } = paginationConfig || {};
+        // 构造序号
+        const getIndex = () => {
+            if (typeof showIndex === 'function') {
+                return showIndex(props);
+            }
+            return (current - 1) * pageSize + rowIndex + 1;
+        };
+
+        // 构造行复选框
+        const getCheckbox = () => {
+            const index = getCheckedIndex();
+            return <Checkbox checked={index > -1} onClick={onToggle.bind(null, index)} />;
         };
         return (
             <div className={s.firstArea}>
@@ -424,12 +489,27 @@ const Cell = (props: CellProps) => {
                         top: 0,
                         paddingLeft: '16px',
                         background: groupLevel === 3 ? '#EEEEEE' : groupLevel === 2 ? '#EDEDED' : '#F7F9FA',
+                        zIndex: columnIndex === 0 ? 6 : 5,
                     }}
                 >
-                    {columnIndex === 0 &&
-                        position !== 'right' &&
-                        record.groupConfig[0] &&
-                        `${record.groupConfig[0].colChsName}:${record.groupTextArr[0]}`}
+                    {columnIndex === 0 && position !== 'right' && record.groupConfig[0] && (
+                        <div className={s.groupContainer}>
+                            <Checkbox
+                                className={s.groupCheck}
+                                checked={getGroupChecked(1)}
+                                onClick={onToggleGroup.bind(null, 1)}
+                            />
+                            <div className={s.groupExpand} onClick={onToggleGroupClose.bind(null, 1)}>
+                                <IconFont type={getGroupExpanded(1) ? "iconxiala1" : "iconzirenwujinru"} />
+                            </div>
+                            <div className={s.groupContent}>
+                                <span
+                                    className={s.groupText}
+                                >{`${record.groupConfig[0].colChsName}:${record.groupTextArr[0]}`}</span>
+                                <span className={s.groupCount}>{`共：${record.group1Children.length}条`}</span>
+                            </div>
+                        </div>
+                    )}
                 </div>
             )}
             {record.classList && record.classList[1] && (
@@ -439,12 +519,27 @@ const Cell = (props: CellProps) => {
                         top: record.classList[0] ? 40 : 0,
                         paddingLeft: '32px',
                         background: groupLevel === 3 ? '#F5F5F5' : '#F7F9FA',
+                        zIndex: columnIndex === 0 ? 6 : 5,
                     }}
                 >
-                    {columnIndex === 0 &&
-                        position !== 'right' &&
-                        record.groupConfig[1] &&
-                        `${record.groupConfig[1].colChsName}:${record.groupTextArr[1]}`}
+                    {columnIndex === 0 && position !== 'right' && record.groupConfig[1] && (
+                        <div className={s.groupContainer}>
+                            <Checkbox
+                                className={s.groupCheck}
+                                checked={getGroupChecked(2)}
+                                onClick={onToggleGroup.bind(null, 2)}
+                            />
+                            <div className={s.groupExpand} onClick={onToggleGroupClose.bind(null, 2)}>
+                                <IconFont type={getGroupExpanded(2)?"iconxiala1":"iconzirenwujinru"} />
+                            </div>
+                            <div className={s.groupContent}>
+                                <span
+                                    className={s.groupText}
+                                >{`${record.groupConfig[1].colChsName}:${record.groupTextArr[1]}`}</span>
+                                <span className={s.groupCount}>{`共：${record.group2Children.length}条`}</span>
+                            </div>
+                        </div>
+                    )}
                 </div>
             )}
             {record.classList && record.classList[2] && (
@@ -454,12 +549,27 @@ const Cell = (props: CellProps) => {
                         top: groupLevel === 3 ? 80 : groupLevel === 2 ? 40 : 0,
                         paddingLeft: '48px',
                         background: '#F7F9FA',
+                        zIndex: columnIndex === 0 ? 6 : 5,
                     }}
                 >
-                    {columnIndex === 0 &&
-                        position !== 'right' &&
-                        record.groupConfig[2] &&
-                        `${record.groupConfig[2].colChsName}:${record.groupTextArr[2]}`}
+                    {columnIndex === 0 && position !== 'right' && record.groupConfig[2] && (
+                        <div className={s.groupContainer}>
+                            <Checkbox
+                                className={s.groupCheck}
+                                checked={getGroupChecked(3)}
+                                onClick={onToggleGroup.bind(null, 3)}
+                            />
+                            <div className={s.groupExpand} onClick={onToggleGroupClose.bind(null, 3)}>
+                                <IconFont type={getGroupExpanded(3)?"iconxiala1":"iconzirenwujinru"} />
+                            </div>
+                            <div className={s.groupContent}>
+                                <span
+                                    className={s.groupText}
+                                >{`${record.groupConfig[2].colChsName}:${record.groupTextArr[2]}`}</span>
+                                <span className={s.groupCount}>{`共：${record.group3Children.length}条`}</span>
+                            </div>
+                        </div>
+                    )}
                 </div>
             )}
             {columnIndex === 0 && position !== 'right' && renderFirst()}
@@ -470,7 +580,7 @@ const Cell = (props: CellProps) => {
                     'cellUnit',
                     `table_${tableId}`,
                     `row_${rowIndex}`,
-                    `col_${columnIndex}`,
+                    `col_${columnIndex}`
                 )}
                 data-selected-cell="0"
                 data-editing-cell="0"

components/apolloTable/component/Column.tsx

@@ -4,6 +4,7 @@ import { Checkbox, Tooltip } from 'antd';
 import _ from 'lodash';
 import s from './Column.less';
 import { ColumnProps } from './interface';
+import { memoSelected } from './Cell';
 
 export default class TableColumn extends PureComponent<ColumnProps> {
     changeSort = (type: string) => {
@@ -29,14 +30,11 @@ export default class TableColumn extends PureComponent<ColumnProps> {
     getCheckbox = () => {
         const { rowSelection, dataSource } = this.props;
         const { selectedRows, onChange } = rowSelection;
+        const selectIds = memoSelected(selectedRows);
         let checked = false;
         if (dataSource.length > 0 && selectedRows.length > 0) {
             for (let i = 0; i < dataSource.length; i++) {
-                if (
-                    !selectedRows.some((item) => {
-                        return item.id === dataSource[i].id;
-                    })
-                ) {
+                if (!selectIds.includes(dataSource[i].id)) {
                     break;
                 }
                 if (i === dataSource.length - 1) {
@@ -46,10 +44,10 @@ export default class TableColumn extends PureComponent<ColumnProps> {
         }
         const onToggle = () => {
             if (typeof onChange === 'function') {
-                const data = _.cloneDeep(selectedRows);
+                const data = _.cloneDeep(selectIds);
                 dataSource.map((item: any) => {
                     const index = data.findIndex((temp: any) => {
-                        return temp.id === item.id;
+                        return temp === item.id;
                     });
                     if (checked) {
                         index > -1 && data.splice(index, 1);

components/apolloTable/component/Table.tsx

@@ -61,12 +61,13 @@ export default class AirTable extends Component<TableProps, TableState> {
     memoizeTotalHeight: Function;
 
     static getDerivedStateFromProps(nextProps: TableProps, prevState: TableState) {
-        const { columns, dataSource } = prevState;
+        const { columns, prevPropsDataSource } = prevState;
         const nextState: TableState = {
             ...prevState,
         };
-        if (JSON.stringify(dataSource) !== JSON.stringify(nextProps.dataSource)) {
+        if (JSON.stringify(prevPropsDataSource) !== JSON.stringify(nextProps.dataSource)) {
             nextState.dataSource = nextProps.dataSource;
+            nextState.prevPropsDataSource = nextProps.dataSource;
         }
         if (JSON.stringify(columns) !== JSON.stringify(nextProps.columns)) {
             nextState.columns = nextProps.columns;
@@ -82,6 +83,7 @@ export default class AirTable extends Component<TableProps, TableState> {
             dataSource,
             tableWidth: width || 0,
             tableHeight: height || 0,
+            toggleGroup: 0,
         };
         this.config = getDefaultTableConfig(props);
         this.memoizeFormatColumns = memoizeOne(getFormatColumns);
@@ -94,15 +96,36 @@ export default class AirTable extends Component<TableProps, TableState> {
         this.memoizeData = memoizeOne(this.filterData);
     }
 
-    componentDidUpdate(prevProps: Readonly<TableProps>): void {
+    componentDidUpdate(prevProps: Readonly<TableProps>, prevState): void {
         if (
             JSON.stringify(this.props.dataSource) !== JSON.stringify(prevProps.dataSource)
             || JSON.stringify(this.props.groupConfig) !== JSON.stringify(prevProps.groupConfig)
+            || prevState.toggleGroup !== this.state.toggleGroup
         ) {
             this.recomputeGridSize();
         }
     }
 
+    toggleGroup = (ids: number[], flag: boolean) => {
+        const { dataSource } = this.state;
+        const data: any[] = [];
+        dataSource.map((item) => {
+            const newItem = _.cloneDeep(item);
+            if (ids.includes(item.id)) {
+                data.push({
+                    ...newItem,
+                    hidden: flag,
+                });
+            } else {
+                data.push(newItem);
+            }
+        });
+        this.setState({
+            dataSource: data,
+            toggleGroup: Math.random(),
+        });
+    };
+
     // 获取表格显示数据
     filterData = (columns: ColumnProps[], dataSource: RowProps[]) => {
         if (columns.length === 0 || dataSource.length === 0) {
@@ -154,6 +177,7 @@ export default class AirTable extends Component<TableProps, TableState> {
             this.grid6.recomputeGridSize();
         }
     };
+
     // 页面大小变化回调
     onResize = ({ width, height }: { width: number; height: number }) => {
         this.setState(
@@ -183,6 +207,7 @@ export default class AirTable extends Component<TableProps, TableState> {
             this.recomputeGridSize,
         );
     };
+
     // 拖拽自定义固定列前置动作
     onResizeStartLeftDragFixed = () => {
         // 拖动开始，将表格滚动回最左端
@@ -190,6 +215,7 @@ export default class AirTable extends Component<TableProps, TableState> {
             this.grid4.scrollToPosition({ scrollLeft: 0 });
         }
     };
+
     // 拖拽自定义固定列后置动作
     onResizeStopLeftDragFixed = (columns: ColumnProps[]) => {
         this.setState(
@@ -199,6 +225,7 @@ export default class AirTable extends Component<TableProps, TableState> {
             this.recomputeGridSize,
         );
     };
+
     // 拖拽自定义固定列前置动作
     onResizeStartRightDragFixed = () => {
         // 拖动开始，将表格滚动回最右端
@@ -208,6 +235,7 @@ export default class AirTable extends Component<TableProps, TableState> {
             this.grid4.scrollToCell({ columnIndex: showColumns.length - 1 });
         }
     };
+
     // 拖拽自定义固定列后置动作
     onResizeStopRightDragFixed = (columns: ColumnProps[]) => {
         this.setState(
@@ -217,6 +245,7 @@ export default class AirTable extends Component<TableProps, TableState> {
             this.recomputeGridSize,
         );
     };
+
     // 拖拽滚动表格
     onDragSortedMove = (direction: string, step: number) => {
         // 拖动超过视图范围，将表格左右滚动
@@ -234,6 +263,7 @@ export default class AirTable extends Component<TableProps, TableState> {
             }
         }
     };
+
     // 拖拽排序回调
     onDragSortedCb = (columns: ColumnProps[]) => {
         this.setState(
@@ -243,6 +273,7 @@ export default class AirTable extends Component<TableProps, TableState> {
             this.recomputeGridSize,
         );
     };
+
     // 渲染表头
     renderHeaderCell = (
         { showColumns, position }: { showColumns: ColumnProps[]; position?: string },
@@ -425,13 +456,17 @@ export default class AirTable extends Component<TableProps, TableState> {
                 tableId={tableId}
                 maxPopHeight={maxPopHeight}
                 renderFirstLeft={renderFirstLeft}
+                toggleGroup={this.toggleGroup}
+                dataSource={dataSource}
             />
         );
     };
 
     render() {
-        const { loading, noDataPlaceholder, loadComp, canFixed, tableId, cachedFeAttr, onDragFixed } = this.props;
-        const { columns, dataSource, tableWidth = 0, tableHeight = 0 } = this.state;
+        const {
+            loading, noDataPlaceholder, loadComp, canFixed, tableId, cachedFeAttr, onDragFixed,
+        } = this.props;
+        const { columns, dataSource, tableWidth = 0, tableHeight = 0, toggleGroup } = this.state;
         const { overscanColumnCount, overscanRowCount, rowHeight, headerHeight, columnWidth } = this.config;
         const scrollbarWidth = scrollbarSize() || 0;
         const formatColumns = this.memoizeFormatColumns(columns, cachedFeAttr, tableId);
@@ -439,9 +474,9 @@ export default class AirTable extends Component<TableProps, TableState> {
         const leftColumns = this.memoizeLeftColumns(showColumns);
         const rightColumns = this.memoizeRightColumns(showColumns);
         // 有隐藏列时，修正数据与列头不匹配问题
-        const showData = this.memoizeData(showColumns, dataSource);
-        const leftData = this.memoizeData(leftColumns, dataSource);
-        const rightData = this.memoizeData(rightColumns, dataSource);
+        const showData = this.memoizeData(showColumns, dataSource, toggleGroup);
+        const leftData = this.memoizeData(leftColumns, dataSource, toggleGroup);
+        const rightData = this.memoizeData(rightColumns, dataSource, toggleGroup);
         // 左侧固定列数量
         const leftCount = leftColumns.length;
         const rightCount = rightColumns.length;
@@ -451,7 +486,7 @@ export default class AirTable extends Component<TableProps, TableState> {
         const rightWidth = this.memoizeLeftWidth(rightColumns, showColumns, columnWidth, tableWidth);
         const tableBodyHeight: number = tableHeight - headerHeight;
         const { totalWidth } = this.memoizeTotalWidth(showColumns, columnWidth);
-        const totalHeight = this.memoizeTotalHeight(dataSource, rowHeight);
+        const totalHeight = this.memoizeTotalHeight(dataSource, rowHeight, toggleGroup);
         let realWidth = tableWidth;
         let paddingRight = 0;
         if (rowCount > 0 && totalHeight > tableBodyHeight) {
@@ -460,7 +495,8 @@ export default class AirTable extends Component<TableProps, TableState> {
         }
         return (
             <Consumer>
-                {({ locale }) => (
+                {({ locale }) => {
+                    return (
                         <ScrollSync>
                             {({ onScroll, scrollLeft, scrollTop }: any) => {
                                 return (
@@ -642,8 +678,8 @@ export default class AirTable extends Component<TableProps, TableState> {
                                                                             })}
                                                                         />
                                                                     ) : (
-                                                                    columnCount > 0 &&
-                                                                    !loading && (
+                                                                        columnCount > 0
+                                                                    && !loading && (
                                                                             <Empty
                                                                         className={styles.defaultEmpty}
                                                                         description={
@@ -759,7 +795,7 @@ export default class AirTable extends Component<TableProps, TableState> {
                                         )}
                                         <div className={styles.fillHandleWrapper} />
                                         <div className={styles.loading} style={{ top: `${tableBodyHeight / 2}px` }}>
-                                        {loading && (loadComp ? loadComp : <Spin />)}
+                                            {loading && (loadComp || <Spin />)}
                                         </div>
                                         <div className={styles.widthHandleWrapper} id={`dividerWrap_${tableId}`}>
                                             <div className={styles.widthHandle} id={`divider_${tableId}`} />
@@ -769,7 +805,8 @@ export default class AirTable extends Component<TableProps, TableState> {
                                 );
                             }}
                         </ScrollSync>
-                )}
+                    );
+                }}
             </Consumer>
         );
     }

components/apolloTable/component/index.tsx

@@ -47,11 +47,11 @@ const formatData = (config: string[], dataSource: any[]) => {
     }
     const map: any = {};
     // 一级分组条件
-    const group1 = config[0];
+    const group1:any = config[0];
     // 二级分组条件
-    const group2 = config[1];
+    const group2:any = config[1];
     // 三级分组条件
-    const group3 = config[2];
+    const group3:any = config[2];
     // 遍历数据默认已排序，根据分组级别给每行添加分组class
     return dataSource.map((row: any) => {
         const groupKeyArr: string[] = [];
@@ -79,37 +79,52 @@ const formatData = (config: string[], dataSource: any[]) => {
             const group1Key = groupKeyArr[0];
             const group1Text = groupTextArr[0];
             if (!map[group1Key]) {
-                map[group1Key] = group1Text;
+                map[group1Key] = {
+                    text: group1Text,
+                    children: [],
+                };
                 if (row.classList) {
                     row.classList[0] = 'groupLevel1';
                 } else {
                     row.classList = ['groupLevel1'];
                 }
+                row.group1Children = map[group1Key].children;
             }
+            map[group1Key].children.push(row.id);
         }
         if (groupKeyArr[1]) {
             const group2Key = `${groupKeyArr[0]}-${groupKeyArr[1]}`;
             const group2Text = `${groupTextArr[0]}-${groupTextArr[1]}`;
             if (!map[group2Key]) {
-                map[group2Key] = group2Text;
+                map[group2Key] = {
+                    text: group2Text,
+                    children: [],
+                };
                 if (row.classList) {
                     row.classList[1] = 'groupLevel2';
                 } else {
                     row.classList = ['', 'groupLevel2', ''];
                 }
+                row.group2Children = map[group2Key].children;
             }
+            map[group2Key].children.push(row.id);
         }
         if (groupKeyArr[2]) {
             const group3Key = groupKeyArr.join('-');
             const group3Text = groupTextArr.join('-');
             if (!map[group3Key]) {
-                map[group3Key] = group3Text;
+                map[group3Key] = {
+                    text: group3Text,
+                    children: [],
+                };
                 if (row.classList) {
                     row.classList[2] = 'groupLevel3';
                 } else {
                     row.classList = ['', '', 'groupLevel3'];
                 }
+                row.group3Children = map[group3Key].children;
             }
+            map[group3Key].children.push(row.id);
         }
         row.groupLevel = groupKeyArr.length;
         row.groupKeyArr = groupKeyArr;
@@ -224,7 +239,9 @@ class AirTable extends React.Component<CommonProps, CommonState> {
         return (
             <Provider value={{ locale: this.getContext() }}>
                 <div className={classNames(styles.container, className)}>
-                    {operateConfig && <OperateConfig selfClass={selfClass} columns={columns} operateConfig={operateConfig} />}
+                    {operateConfig && (
+                        <OperateConfig selfClass={selfClass} columns={columns} operateConfig={operateConfig} />
+                    )}
                     <div className={classNames(styles.tableContainer, tableClassName)}>
                         {tableOperateConfig && (
                             <div className={styles.tableOperateContainer}>

components/apolloTable/component/interface.tsx

@@ -94,6 +94,8 @@ export interface TableState {
     groupConfig?: any[];
     tableHeight?: number;
     tableWidth?: number;
+    toggleGroup?: number;
+    prevPropsDataSource?: RowProps[];
 }
 export interface CommonProps extends TableProps {
     operateConfig?: OperateConfigProps; // 操作栏
@@ -142,6 +144,8 @@ export interface CellProps {
     tableId?: string | number;
     maxPopHeight?: string | number;
     renderFirstLeft?: Function;
+    toggleGroup: Function;
+    dataSource: RowProps[];
 }
 
 export interface EditCellProps {

components/apolloTable/utils/memCols.ts

 import memoizeOne from 'memoize-one';
-import { ColumnProps, RowProps } from '../component/interface';
 import { getCache, saveCache } from '@/submodule/components/apolloTable/utils/cache';
+import { ColumnProps, RowProps } from '../component/interface';
 
 // 获取左侧固定列数量
 export const getLeftColumns = (columns: ColumnProps[]) => {
@@ -64,8 +64,8 @@ export const getRowHeight = (
     { dataSource, rowHeight }: { dataSource: RowProps[]; rowHeight: number },
     { index }: { index: number },
 ) => {
-    const { classList } = dataSource[index];
-    let len = 1;
+    const { classList, hidden } = dataSource[index];
+    let len = 0;
     if (classList) {
         classList.map((item) => {
             if (item) {
@@ -73,11 +73,12 @@ export const getRowHeight = (
             }
         });
     }
-    return rowHeight * len;
+    const basic = hidden ? 0 : rowHeight;
+    return 40 * len + basic;
 };
 
 // 获取数据总高度
-export const getTotalHeight = (dataSource: RowProps[], rowHeight: number) => {
+export const getTotalHeight = (dataSource: RowProps[], rowHeight: number, toggleGroup:boolean) => {
     let height = 0;
     dataSource.map((item: any, index: number) => {
         height += getRowHeight({ dataSource, rowHeight }, { index });