自定义列功能
/* * @File: 自定义表格列 * @Author: lintao.wang * @Date: 2020-01-03 15:08:32 * @Last Modified by: lintao.wang * @Last Modified time: 2020-01-03 17:16:30 * @Usage * <CustomColumn columns={props.columns}> {(columns: ColumnProps<any>[]) => ( <Table className={`${styles.mTaskTable} ${className}`} expandRowByClick expandedRowKeys={expandedRowKeys} onExpandedRowsChange={onExpandedRowsChange} {...restProps} columns={columns} /> )} </CustomColumn>* */import React, { useState, useEffect } from 'react';import { Popover, Button, Checkbox } from 'antd';import { ColumnProps } from 'antd/lib/table';import _ from 'lodash';import styles from './index.less';const CustomColumn = (props: { columns: ColumnProps<any>[]; defaultColumns?: Array<ColumnProps<any> | string>; children: (columns) => React.ReactNode;}) => { const { columns = [] } = props; const [column, setColumn] = useState(columns); const onChange = value => { const { columns = [] } = props; const column = columns.filter( item => value.includes(item.dataIndex) || value.includes(item.title), ); setColumn(column); }; let { defaultColumns = [] } = props; useEffect(() => { defaultColumns = defaultColumns?.length ? defaultColumns : columns; const defaultValue = defaultColumns .map(item => (typeof item === 'string' ? item : item?.dataIndex || _.toString(item?.title))) .filter(item => column.some(cell => cell.dataIndex === item || cell.title === item)); onChange(defaultValue); }, []); const renderContent = () => ( <Checkbox.Group options={columns?.map((item: ColumnProps<any>, index) => ({ label: item.title || '', value: item.dataIndex || _.toString(item.title) || index, }))} value={column.map(item => item.dataIndex || _.toString(item.title))} onChange={onChange} /> ); return ( <div className={styles.cCustomColumn}> <Popover content={renderContent()} title="请选择要展示的列名" trigger="click" overlayClassName={styles.mCustomPopover} > <Button icon="setting">自定义列</Button> </Popover> {props.children(column)} </div> );};export default CustomColumn;