本文介绍如何在React应用中动态配置antd Table组件的columns属性，通过state管理和点击事件实现增删表头列的功能。示例代码展示了根据字段数据动态生成columns，并提供了点击事件处理逻辑。
constructor(props) {
super(props)
this.state = {
fieldDdata: data,//操作动态columns的配置
columns: [],
tableDate: [],
}
}
columns={this.state.columns}
dataSource={this.state.tableDate}
/>
onClick={event => {
event.stopPropagation()
console.log("name", column)
// newColums
let newdata = this.state.fieldDdata.map(item => {
if (item.column === column) {
item.selected = !selected
}
return i
}
let newColums = this.state.columns
if (content === "remove") {
//remove
newColums = newColums.filter(item => item.dataIndex !== column)
} else if (content === "add") {
//add
newColums.push({
title: column,
dataIndex: column,
key: column ,
//antd 的table td 超出部分隐藏并显示省略号
onCell: () => {
return {
style: {
maxWidth: 150,
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow:'ellipsis',
cursor:'pointer'
}
}
},
render: (text) => {text}
},
this.setState({
fieldDdata: newdata,
columns: newColums,
})
}}
>
{content}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
