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.removeEventListener('mouseup', this.handleMouseUp)

}

// 当页面挂载的时候，将需要的数据进行整理

componentDidMount() {

let olderHeader = [];

for (let i = 0; i < this.props.choice.length; i++) {

this.state.checkState.push(false)

}

olderHeader = JSON.parse(JSON.stringify(this.props.headerSetting));

window.addEventListener('mouseup', this.handleMouseUp)

this.setState({

tableHeader: this.props.headerSetting,

tableHeaderOlder: olderHeader

});

}

//将不必要的数据置空

resetCheckBox = (arr, flag) => {

let num = 0;

for (let i = 0; i < arr.length; i++) {

if (arr[i] === true) {

num++

}

}

if (flag && num !== this.state.additionChoice.length) {

for (let i = 0; i < this.props.choice.length; i++) {

let result = findIndex(this.state.additionChoice, this.props.choice[i]);

if (result === -1) {

arr[i] = false;

} else {

arr[i] = true;

}

}

this.setState({

checkState: arr

})

}

}

//点击页面空白区域,更多弹层消失

handleMouseUp = (newData) => {

let arr = JSON.parse(JSON.stringify(this.state.checkState));

if (this.state.additionChoice.length === 0) {

for (let i = 0; i < this.state.additionChoice.length; i++) {

arr[i] = false;

this.setState({

checkChoice: arr

})

}

}

document.onmouseup = (event) => {

let flag = event.target.id !== 'choiceModal' &&

event.target.parentElement.id !== 'iconId' &&

(event.target.parentElement.parentElement.parentNode.id || event.target.parentElement.parentElement.id) !== 'choiceModal'

this.resetCheckBox(newData, flag);

if (event.target.id !== 'choiceModal' &&

event.target.parentElement.id !== 'iconId') {

this.setState({

showChoice: false

})

}

}

}

// 点击多选框的时候，对多选框中的值进行查看

checkChoice = (index, event) => {

let newData = JSON.parse(JSON.stringify(this.state.checkState));

newData[index] = !newData[index];

this.setState({

showChoice: true,

checkState: newData

});

let value = JSON.parse(JSON.stringify(newData))

this.handleMouseUp(value)

}

// 点击确认按钮的时候，将选中列加入到表格的表头中去

confirmClick = () => {

this.setState({

tableHeader: this.state.tableHeaderOlder,

});

for (let i = 0; i < this.state.checkState.length; i++) {

let index = findIndex(this.state.additionChoice, this.props.choice[i]);

if (this.state.checkState[i]) {

if (index === -1) {

this.state.additionChoice.push(this.props.choice[i]);

}

}

else {

if (index !== -1) {

this.state.additionChoice.splice(index, 1);

}

}

}

let tempArr = JSON.parse(JSON.stringify(this.state.tableHeaderOlder));

for (let i = this.state.additionChoice.length - 1; i > -1; i--) {

let objectItem = this.state.additionChoice[i]

tempArr.splice(2, 0, objectItem);

this.setState({

tableHeader: tempArr

});

}

}

// 点击取消按钮

clearClick = () => {

let clearArr = [];

for (let i = 0; i < this.props.choice.length; i++) {

clearArr[i] = false;

}

let tempArr = JSON.parse(JSON.stringify(this.state.tableHeaderOlder));

this.setState({

tableHeader: tempArr,

checkState: clearArr,

additionChoice: []

});

}

// 点击图标的

clickIcon = (event) => {

this.setState({

showChoice: !this.state.showChoice

})

}

operateCell = (text, recorder) => {

return (

this.props.onInquireItem(recorder)}>查询

this.props.onCloseItem(recorder)}>关闭

this.props.onDeleteItem(recorder)}>删除

)

}

// 下拉框的样式的编写

titleHandle = () => {

return (

操作

this.clickIcon(event)} />

'ant-table-filter-dropdown item-style show-item' : 'ant-table-filter-dropdown item-style hidden-item'} >

{this.props.choice.map((item, index) => {

return (

className='checkBox-style' key={item.title} checked={this.state.checkState[index]}>{item.key}

)

})}

this.confirmClick()} >确定

this.clearClick()} >重置

)

}

render() {

return (

{index + 1}} />

{

this.state.tableHeader.map((item) => {

return ()

})

}

this.operateCell(text, recorder)} />

)

}

}

HeaderSettingTable.propTypes = {

headerSetting: PropTypes.array,

onInquireItem: PropTypes.func,

onCloseItem: PropTypes.func,

onDeleteItem: PropTypes.func,

choice: PropTypes.array,

dataSource: PropTypes.array

}

export default HeaderSettingTable;