在Ant Design的Table组件中,可以通过使用onHeaderCell
属性来访问表头单元格,并绑定点击事件。
代码中对columns
数组中的每个对象都调用了.map()
方法,并对每个对象添加了onHeaderCell
属性。这个属性接受一个函数,该函数返回一个对象,该对象的onClick
属性是我们要处理的点击事件处理函数。当你点击表头时,handleHeaderCellClick
函数将被调用,并且相关的列标题将会被打印到控制台。
import React from 'react';
import { Table } from 'antd';
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
// 其他列...
];
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
},
// 其他数据...
];
const App = () => {
const handleHeaderCellClick = (column) => {
console.log('Clicked column:', column.title);
};
return (
<Table
columns={columns.map((col) => ({
...col,
onHeaderCell: (column) => ({
onClick: () => handleHeaderCellClick(column),
}),
}))}
dataSource={data}
/>
);
};
export default App;