ant design onCell如何使用
时间: 2023-07-20 21:38:02 浏览: 47
Ant Design中Table组件的onCell属性可以通过以下方式使用:
1. 在Table组件标签中添加onCell属性:
```jsx
import { Table } from 'antd';
function App() {
const dataSource = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York',
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London',
},
];
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
onCell: (record, rowIndex) => {
return {
onClick: () => {
console.log(`clicked row: ${rowIndex}, name: ${record.name}`);
},
};
},
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
];
return <Table dataSource={dataSource} columns={columns} />;
}
```
在这个例子中,我们在第一列的onCell属性中定义了一个回调函数,当单击单元格时会触发该回调函数,并输出点击的行号和姓名。
2. 在columns中定义onCell属性:
```jsx
import { Table } from 'antd';
function App() {
const dataSource = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York',
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London',
},
];
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
onCell: (record, rowIndex) => {
return {
onClick: () => {
console.log(`clicked row: ${rowIndex}, address: ${record.address}`);
},
};
},
},
];
return <Table dataSource={dataSource} columns={columns} />;
}
```
在这个例子中,我们在第三列的onCell属性中定义了一个回调函数,当单击单元格时会触发该回调函数,并输出点击的行号和地址。
可以看到,无论是在Table组件标签中添加onCell属性,还是在columns中定义onCell属性,都可以实现对Table组件单元格的单击事件进行处理。