Ant Design Pro：实现数据筛选与排序的实战示例

在Ant Design Pro中，可控的筛选和排序是一个实用的功能，它允许用户在表格展示数据时进行自定义操作，从而实现高效的信息浏览和管理。以下是一个实例代码，展示了如何在React应用中集成Ant Design（AntD）组件，如Table和Button，来实现实时筛选和排序。 首先，引入必要的库，如React和Ant Design的Table和Button组件： ```jsx import React from 'react'; import { Table, Button } from 'antd'; ``` 在这个示例中，`data`数组包含了员工的基本信息，包括姓名、年龄和地址，用于渲染Table： ```jsx const data = [ { key: '1', name: '张三', age: 22, address: '浙江省温州市', }, // ... 其他员工数据 ]; ``` `SortTable`组件是自定义的，继承自React.Component，并维护了`filteredInfo`和`sortedInfo`的状态变量，分别用于存储筛选条件和排序信息： ```jsx class SortTable extends React.Component { state = { filteredInfo: null, sortedInfo: null, }; ``` `handleChange`方法是响应筛选和排序事件的处理函数，它接收三个参数：`pagination`（当前页码和每页大小）、`filters`（筛选条件对象，如姓名、地址等）和`sorter`（排序规则，包括列名、排序方式和字段）。通过打印这些参数，可以查看用户的实时操作： ```jsx handleChange = (pagination, filters, sorter) => { console.log('Various parameters:', pagination, filters, sorter); this.setState({ filteredInfo: filters, sortedInfo: sorter, }); }; ``` 在Table组件中，我们可以通过`filter`属性应用筛选条件，`columns`属性配置排序功能，并在`onchange`事件中调用`handleChange`： ```jsx <Table columns={[ // ... { title: '姓名', dataIndex: 'name', sorter: true, // 开启排序 onCell: (record, index) => ({ onClick: () => { this.handleChange({}, { name: record.name }, { field: 'name' }); // 点击排序 }, }), }, // ... ]} dataSource={data} onChange={this.handleChange} // 绑定事件处理函数 /> ``` 最后，用户可以通过点击列头或使用提供的筛选按钮来进行筛选和排序操作，控制台会输出相应的参数变化，从而动态调整表格显示的内容。 总结来说，这个Ant Design Pro中的筛选和排序实例演示了如何利用AntD的Table组件结合自定义组件，提供给用户直观的交互体验，帮助他们高效地管理和分析数据。通过监听用户操作并更新状态，我们可以轻松实现数据过滤和排序功能。