ant design table onchange
时间: 2025-01-25 16:59:25 浏览: 45
### 关于 Ant Design Table 组件中的 `onChange` 事件
在 Ant Design 的表格组件 (`Table`) 中,`onChange` 是一个非常重要的回调函数。每当分页、排序或筛选条件发生变化时会触发此方法[^1]。
#### 基本用法
当配置了 `onChange` 属性之后,在用户交互引起上述变化的情况下,该属性绑定的方法就会被执行,并接收三个参数:`pagination`, `filters`, 和 `sorter`。这些对象包含了当前页面信息、列过滤状态以及排序详情等数据结构[^2]。
```javascript
import React from 'react';
import { Table } from 'antd';
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
sorter: (a, b) => a.name.length - b.name.length,
},
];
const data = [
{ key: '1', name: 'John Brown' },
{ key: '2', name: 'Jim Green' }
];
function handleTableChange(pagination, filters, sorter) {
console.log('Various parameters:', pagination, filters, sorter);
}
export default function App() {
return (
<Table
columns={columns}
dataSource={data}
onChange={handleTableChange}
/>
);
}
```
通过监听并处理这三种类型的变更,可以实现诸如动态加载更多记录、更新 URL 查询字符串等功能来增强用户体验[^3]。
阅读全文
相关推荐


















