ant design 中实现表格头部可删除和添加
我是用antd pro做一个项目。有一个小需求是表格头部栏可操作。具体是表头的每一项都带一个“x”按钮，当不想展示这一栏的时候，直接点“x”,这一栏就不展示了。不展示的头部标签放一边，也可以随时加入到表格中。
先看图：
1.表头信息有个“x”,当点击了某一项，该项在表格中消失，并且该标签会在可添加表头上展示。
2.此时我“x”掉了序号，用户名两项，得到下面的效果。
3.此时我点击了 “+用户名” 标签，表格中再次展示了用户名，同时，可添加表头栏少了 “+用户名” 标签。
这项功能在ant design 上的表格组件是没有的，所以我自己在现有组件的基础上实现的。如果你想看懂下面的代码，你需要了解ant design 的表格组件的使用。
import React from 'react';
import { connect } from 'dva';
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import {
Table,
Card,
Form,
Input,
Button,
Tag,
Select,
Row,
Col,
DatePicker,
message,
Tooltip,
Icon,
} from 'antd';
import { ABNORMAL_AUDIT_STATUS, ABNORMAL_AUDIT_STATUS_COLOR } from '@/constants';
import moment from 'moment';
const { Option } = Select;
const { RangePicker } = DatePicker;
const FormItem = Form.Item;
const risk = ['无', '低', '中', '高', '严重'];
@connect(({ riskEvent, abnormalList, loading }) => ({
riskEvent,
abnormalList,
loading: loading.models.abnormalList,
}))
@Form.create()
class AbnormalList extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedData: [],
newCol: [],
colKey: {
id: 0,
username: 1,
riskLevel: 2,
riskScene: 3,
department: 4,
createTime: 5,
status: 6,
baseInfo: 7,
operatePlatform: 8,
},
columns: [
{
title: (
<div>
<a onClick={() => this.columsControl('id')}>
<Icon style={{ fontSize: '6px' }} type="close" />
</a>{' '}
序号
</div>
),
dataIndex: 'id',
key: '序号',
},
{
title: (
<div>
<a onClick={() => this.columsControl('username')}>
<Icon style={{ fontSize: '6px' }} type="close" />
</a>{' '}
用户名
</div>
),
dataIndex: 'username',
key: '用户名',
},
{
title: (
<div>
<a onClick={() => this.columsControl('riskLevel')}>
<Icon style={{ fontSize: '6px' }} type="close" />
</a>{' '}
风险等级
</div>
),
dataIndex: 'riskLevel',
key: '风险等级',
sorter: true,
sortDirections: ['descend'],
render: text => risk[text],
},
{
title: (
<div>
<a onClick={() => this.columsControl('riskScene')}>
<Icon style={{ fontSize: '6px' }} type="close" />
</a>{' '}
风险场景
</div>
),
dataIndex: 'riskScene',
key: '风险场景',
render: riskScene => {
const isLong = riskScene.length > 10;
return (
<span>
{isLong ? (
<Tooltip title={riskScene}>`${riskScene.slice(0, 10)}...`</Tooltip>
) : (
<span>{riskScene}</span>
)}
</span>
);
},
},
{
title: (
<div>
<a onClick={() => this.columsControl('department')}>
<Icon style={{ fontSize: '6px' }} type="close" />
</a>{' '}
部门
</div>
),
dataIndex: 'department',
key: '部门',
render: dep => {
const isLong = dep.length > 10;
return (
<span>
{isLong ? (
<Tooltip title={dep}>`${dep.slice(0, 10)}...`</Tooltip>
) : (
<span>{dep}</span>
)}
</span>
);
},
},
{
title: (
<div>
<a onClick={() => this.columsControl('createTime')}>
<Icon style={{ fontSize: '6px' }} type="close" />
</a>{' '}
告警时间
</div>
),
dataIndex: 'createTime',
key: '告警时间',
},
{
title: (
<div>
<a onClick={() => this.columsControl('status')}>
<Icon style={{ fontSize: '6px' }} type="close" />
</a>{' '}
状态
</div>
),
dataIndex: 'status',
key: '状态',
render: status => (
<Tag color={ABNORMAL_AUDIT_STATUS_COLOR[status]}>{ABNORMAL_AUDIT_STATUS[status]}</Tag>
),
},
{
title: (
<div>
<a onClick={() => this.columsControl('baseInfo')}>
<Icon style={{ fontSize: '6px' }} type="close" />
</a>
文件名
</div>
),
dataIndex: 'baseInfo',
key: '文件名',
render: text => {
const jsonData = JSON.parse(text);
const name = jsonData.filename;
return name ? <span>{name}</span> : '';
},
},
{
title: (
<div>
<a onClick={() => this.columsControl('operatePlatform')}>
<Icon style={{ fontSize: '6px' }} type="close" />
</a>
操作平台
</div>
),
dataIndex: 'operatePlatform',
key: '操作平台',
},
{
title: '操作',
fixed: 'right',
width: 80,
render: (_, record) => (
<div>
{record.status === 0 ? (
<RoamMoudle onOk={this.pushRoma}>
<a
onClick={() => {
this.roamId(record.id);
}}
>
流转
</a>
</RoamMoudle>
) : (
<span>流转</span>
)}
</div>
),
},
],
};
}
componentWillMount() {
const { dispatch } = this.props;
dispatch({
type: 'abnormalList/fetchList',
payload: {
page: 1,
pageSize: 10,
filter: [],
},
});
}
columsControl = str => {
const { colKey, columns, newCol } = this.state;
const id = colKey[str];
newCol.push(columns[id]);
delete columns[id]; // 此处用delete方便后续添加某项表头的时候能回到最开始的位置
this.setState({ columns, newCol });
};
addCol = (one, str, i) => {
const { colKey, columns, newCol } = this.state;
const id = colKey[str];
columns.splice(id, 1, one); // 替换
newCol.splice(i, 1); // 删除
this.setState({ columns, newCol });
};
handleTableChange = (pagination, filters, sorter) => {
const { current, pageSize } = pagination;
const {
dispatch,
abnormalList: { filter },
} = this.props;
dispatch({
type: 'abnormalList/fetchList',
payload: {
page: current,
pageSize,
filter,
sorter,
},
});
};
render() {
const { abnormalList, loading } = this.props;
const { selectedData, columns, newCol } = this.state;
const { data, page, total } = abnormalList;
const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
this.setState({ selectedData: selectedRowKeys });
},
getCheckboxProps: record => ({
disabled: record.name === 'Disabled User', // Column configuration not to be checked
name: record.name,
}),
};
return (
<GridContent>
<Card bordered={false}>
<div
style={{
border: '1px solid #CAE7FD',
padding: '5px 10px',
borderRadius: '4px',
background: '#E9F7FE',
}}
>
可添加表头：
{newCol.map((item, index) => (
<Tag key={item.dataIndex}>
<a
onClick={() => {
this.addCol(item, item.dataIndex, index);
}}
>
+{item.key}
</a>
</Tag>
))}
</div>
<br />
<Table
columns={columns}
dataSource={data}
loading={loading}
rowSelection={rowSelection}
scroll={{ x: 1300 }}
rowKey="id"
pagination={{
showSizeChanger: true,
current: page,
total,
pageSizeOptions: ['10', '20', '50', '100'],
}}
onChange={this.handleTableChange}
/>
</Card>
</GridContent>
);
}
}
export default AbnormalList;
主要是在columns 中的title中添加点击事件。columsControl，addCol两个函数是实现的关键。
转载请说明来源，谢谢
