ant Table伸缩列组件

resizeTable.tsx

import React, { useState, useEffect } from 'react';
import {Table} from 'antd';
import {ProTable,EditableProTable} from '@ant-design/pro-components';
import { Resizable } from 'react-resizable';
import './resizeTable.less';
/**
 * 20230811 表头伸缩组件 （wsf）
 * props:传递参数添加 => tableType（Table、ProTable、EditableProTable）
 */
const components = {
    header: {
        cell: (props) => {
            const { onResize, width, ...restProps } = props;
            if (!width) {
                return <th {...restProps} />;
            }
            let resizing = true;
            return (
                <Resizable width={width} height={0} onResize={onResize}
                   onResizeStart={() => (resizing = true)}
                   onResizeStop={() => {
                       setTimeout(() => {
                           resizing = false;
                       });
                   }}
                >
                    <th {...restProps} />
                </Resizable>
            );
        },
    },
};

function modifyDeepTreeNodeValueFn({ colList, modifyObj, indexes }) {
    let colList_ = colList;
    let tempArr = [...colList_];
    function modifyDeepTreeNodeValue(indexes) {
        const indexLen = indexes.length;
        for (let i = 0; i < indexLen; i++) {
            const index_ = indexes[i];
            if (i < indexLen - 1) {
                const targetArr = tempArr[index_];
                if (!targetArr) {
                    break;
                }
                tempArr = (tempArr[index_] && tempArr[index_].children) || [];
            } else {
                const target = tempArr[index_];
                if (!target) {
                    break;
                }
                tempArr[index_] = {
                    ...target,
                    ...modifyObj,
                };
            }
        }
    }
    if (indexes.length === 1) {
        const index_ = indexes[0];
        colList_[index_] = {
            ...colList_[index_],
            ...modifyObj,
        };
        return colList_;
    }
    modifyDeepTreeNodeValue(indexes);
    return colList_;
}

export default function ResizeTable(props) {
    // console.log("调用表头伸缩组件<ResizeTable>",props)
    const [selfColumns, setSelfColumns] = useState([]);
    const { columns } = props;
    const handleResize = (indexes) => {
        return (e, d) => {
            const { width } = d.size;
            const nextColumns = modifyDeepTreeNodeValueFn({
                colList: columns,
                modifyObj: { width },
                indexes,
            });
            setSelfColumns([...nextColumns]);
        };
    };
    const setColumnsResizeable = (cols, indexes = []) => {
        return [...cols].map((colItem, index) => {
            const { children, width } = colItem;
            const currentIndexes = [...indexes, index];
            const children_ = Array.isArray(children)
                ? setColumnsResizeable(children, currentIndexes)
                : null;
            return {
                ...colItem,
                onHeaderCell: () => ({
                    width,
                    onResize: handleResize(currentIndexes),
                }),
                children: children_,
                indexes: currentIndexes,
            };
        });
    };
    const columns_ = setColumnsResizeable(columns);
    /*
        说明：根据传递属性进行返回判断
     */
    let _tableType = props == null || props == void(0) || props.tableType == null || props.tableType == void(0)
        ? 'protable' : props.tableType.toString().toLowerCase()
    let newProps = {...props};
    newProps.columns = columns_;
    if(_tableType == 'table' ) {
        return <Table {...newProps}  components={components} />;
    } else if( _tableType == 'protable') {
        return <ProTable {...newProps}  components={components} />;
    } else if( _tableType == 'editableprotable') {
        return <EditableProTable {...newProps} components={components} />;
    }
}

resizeTable.less

.react-resizable {
  position: relative;
  background-clip: padding-box;
}

.react-resizable-handle {
  position: absolute;
  width: 10px;
  height: 100%;
  bottom: 0;
  right: -5px;
  cursor: col-resize;
  z-index: 1;
}

 

表格可伸缩列组件使用说明

安装命令：npm i --save react-resizable

说明：

　　1、组件包含三种样式返回：Table、ProTable、EditableProTable

　　2、组件调用方式：

　　　　import ResizeTable from '@/pages/publicComponents/resizeTable/resizeTable';

　　　　Table =(变为)=> ResizeTable tableType="Table"

　　　　ProTable =(变为)=> ResizeTable tableType="ProTable"

　　　　EditableProTable  =(变为)=> ResizeTable tableType="EditableProTable"