ant design table 如何给每一行的 第一个 td 绑定点击事件
时间: 2023-12-22 07:04:30 浏览: 28
您可以使用 Ant Design Table 的 `onRow` 属性来绑定每一行的点击事件,然后在函数中判断当前点击的是不是第一个 td,如果是,则执行相应的操作。
以下是一个示例代码:
```jsx
import { Table } from 'antd';
const dataSource = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
];
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
render: (text, record) => <span onClick={e => {
if (e.target.cellIndex === 0) {
// 第一个 td 被点击
console.log('Clicked on first cell of row:', record.key);
}
}}>{text}</span>,
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
];
function MyTable() {
return (
<Table
dataSource={dataSource}
columns={columns}
onRow={(record, rowIndex) => {
return {
onClick: event => {
console.log('Clicked on row:', record.key);
},
};
}}
/>
);
}
export default MyTable;
```
在上面的代码中,我们在 `render` 方法中给第一个 td 绑定了点击事件,并且通过 `e.target.cellIndex` 判断当前点击的是不是第一个 td。如果是,则输出相应的信息。同时,我们在 `onRow` 属性中也绑定了每一行的点击事件,用于输出当前点击的行数。