antd 设置表头属性_动态向表头添加列的表格(基于antdesign)

git地址的compont文件夹中

表格效果

使用参数的参数列表：

下拉框实现的效果和antdesign自己声明的过滤器效果一样，但是由于我们的操作逻辑和过滤的逻辑不尽相同，所以自己封装了点击下拉的那个部分。

参数使用详情

表格源代码：

/**

*

* dataSource用来传入表格中想要显示的数据

* headerSetting用来传入初始表头的选项内容 eg：[{ title: '序号', dataIndex: 'order', key: 'num' }]

* choice用来传入点击图标后，出现的复选框的内容 eg：[{ title: 'Male0', key: 'male0', dataIndex: 'male0' }]

* onInquireItem={this.onInquireItem} 对应操作中的查询按钮

* onCloseItem={this.onInquireItem} 对应操作中的关闭按钮

* onDeleteItem={this.onInquireItem} 对应操作中的删除按钮

*/

import React, { Component } from 'react';

import { Icon, Table, Checkbox } from 'antd';

import { findIndex } from 'lodash';

import iconFont from 'Assets/iconfont.js';

import PropTypes from 'prop-types';

import './style.less';

const { Column } = Table;

const IconFont = Icon.createFromIconfontCN({

script: iconFont

})

class HeaderSettingTable extends Component {

state = { tableHeader: [], tableHeaderOlder: [], additionChoice: [], showChoice: false, checkState: [] }

// 绑定鼠标的点击事件

componentWillUnmount() {

window.removeEventLi