antd的Table组件如何点击交换顺序
时间: 2024-06-12 10:05:46 浏览: 82
antd的Table组件默认不支持点击交换顺序,需要自己实现。
以下是一个简单的示例代码,实现了点击表格行交换顺序的功能:
```jsx
import React, { useState } from 'react';
import { Table } from 'antd';
const data = [
{ id: 1, name: 'John Doe' },
{ id: 2, name: 'Jane Doe' },
{ id: 3, name: 'Bob Smith' },
{ id: 4, name: 'Alice Lee' },
];
const columns = [
{ title: 'ID', dataIndex: 'id', key: 'id' },
{ title: 'Name', dataIndex: 'name', key: 'name' },
];
const MyTable = () => {
const [dataSource, setDataSource] = useState(data);
const handleRowClick = (record, index) => {
if (index > 0) {
const newData = [...dataSource];
newData[index] = dataSource[index - 1];
newData[index - 1] = record;
setDataSource(newData);
}
};
return <Table dataSource={dataSource} columns={columns} onRow={(record, index) => ({ onClick: () => handleRowClick(record, index) })} />;
};
export default MyTable;
```
在上面的代码中,我们定义了一个data数组作为表格数据源,然后通过useState创建了一个dataSource状态,用于保存表格数据。
在handleRowClick函数中,我们根据点击的行的index判断是否需要交换顺序,如果index大于0,则交换当前行和上一行的数据。最后使用setDataSource更新数据源。
在Table组件中,我们将onRow属性设置为一个函数,用于绑定行点击事件。在这个函数中,我们调用handleRowClick函数,并将当前行的record和index作为参数传递进去。
最终实现的效果是,当用户点击表格中的一行时,如果不是第一行,则会将当前行和上一行的数据交换顺序。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)