自定义列功能
/*
* @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;