Ant Design Pro 实例：可控筛选与排序

"ant design pro中的可控筛选与排序实例展示了如何在React应用中利用Ant Design Pro库实现数据表格的动态筛选和排序功能。" 在Ant Design Pro中，`Table`组件是一个强大的数据展示组件，它提供了丰富的功能，包括数据的筛选、排序、分页等。以下是对给定代码的详细解释： 1. 导入组件： 首先，我们需要导入React以及Ant Design Pro中的`Table`和`Button`组件。`Table`用于展示数据表格，而`Button`则用于触发某些操作，如筛选或排序。 ```javascript import React from 'react'; import { Table, Button } from 'antd'; ``` 2. 数据源： `data`数组包含了要展示的数据，每个对象代表表格的一行，包含`key`（唯一标识）、`name`（姓名）、`age`（年龄）和`address`（地址）字段。 ```javascript const data = [ // ... ]; ``` 3. 定义组件： `SortTable`是一个React类组件，它扩展自`React.Component`。这个组件将负责处理数据的筛选和排序逻辑。 ```javascript class SortTable extends React.Component { // ... } ``` 4. 组件状态： 在`SortTable`的`state`中，我们有两个关键属性：`filteredInfo`存储筛选后的信息，`sortedInfo`存储排序信息。 ```javascript state = { filteredInfo: null, sortedInfo: null, }; ``` 5. 处理变化： `handleChange`函数是`Table`组件的回调，当用户进行筛选或排序时，这个函数会被调用，传递三个参数：`pagination`（分页信息），`filters`（筛选信息），`sorter`（排序信息）。这里可以更新组件的状态以反映用户操作。 ```javascript handleChange = (pagination, filters, sorter) => { console.log('Various parameters', pagination); console.log('Various parameters', filters); console.log('Various parameters', sorter); this.setState({ filteredInfo: filters, sortedInfo: sorter, }); }; ``` 6. 渲染`Table`组件： 在`render`方法中，我们将创建并返回`Table`组件。`columns`定义了表格列的配置，包括标题、数据键（用于从`data`数组中获取对应值）和额外的处理函数，如排序图标和点击事件。 ```javascript render() { const columns = [ // 定义表格列的配置... ]; return ( <div> <Table columns={columns} dataSource={data} pagination={false} // 可根据需求设置分页 onChange={this.handleChange} /> {/* 其他UI元素 */} </div> ); } ``` 在这个实例中，Ant Design Pro的`Table`组件使得开发者能够轻松地处理数据的展示，提供用户友好的交互，例如实时的筛选和排序。通过监听`onChange`事件并更新组件状态，我们可以保持数据的实时性和一致性，确保用户每次操作都能得到及时的反馈。