antd的table 怎么做筛选

Antd 的 Table 组件提供了筛选功能，可以通过 `columns` 属性中的 `filters` 和 `onFilter` 来实现。具体步骤如下：

1. 在 `columns` 中设置需要筛选的列的 `filters` 属性，如下所示：

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    filters: [
      { text: 'John', value: 'John' },
      { text: 'Jim', value: 'Jim' },
      { text: 'Joe', value: 'Joe' },
    ],
    onFilter: (value, record) => record.name.indexOf(value) === 0,
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
  },
];

2. 在 `Table` 组件中设置 `columns` 和 `dataSource` 属性，并在 `Table` 的 `onChange` 属性中处理筛选操作，如下所示：

class App extends React.Component {
  state = {
    dataSource: [],
  };

  componentDidMount() {
    // 模拟数据请求
    setTimeout(() => {
      this.setState({
        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',
          },
          {
            key: '4',
            name: 'Jim Red',
            age: 32,
            address: 'London No. 2 Lake Park',
          },
        ],
      });
    }, 1000);
  }

  handleTableChange = (pagination, filters, sorter) => {
    console.log('filters:', filters);
    const { dataSource } = this.state;
    // 根据筛选条件过滤数据源
    const filteredData = dataSource.filter(record => {
      return Object.keys(filters).every(key => {
        if (!filters[key].length) {
          return true;
        }
        return filters[key].some(value => record[key].indexOf(value) === 0);
      });
    });
    this.setState({ dataSource: filteredData });
  };

  render() {
    const { dataSource } = this.state;
    return (
      <Table
        columns={columns}
        dataSource={dataSource}
        onChange={this.handleTableChange}
      />
    );
  }
}

在上述代码中，我们在 `handleTableChange` 方法中处理筛选操作，首先通过 `console.log('filters:', filters)` 打印出当前的筛选条件，然后根据筛选条件过滤数据源，并通过 `this.setState({ dataSource: filteredData })` 更新数据源，从而实现筛选功能。

注意：筛选条件的格式为 `{ '列名': ['筛选项1', '筛选项2', ...] }`，如 `{ name: ['John', 'Jim'] }` 表示筛选姓名为 John 或 Jim 的记录。