2019.12.06 遇到了一个bug

bug 描述：在使用 antd 组合组件 Form + Table 时，选择相应的搜索条件后，点击“搜索”按钮，Table 会渲染相应的数据，且Table 表头也有自带的过滤功能（实际上是column的filters属性起的作用）；然后再点击“清除”按钮，所有的搜索条件和表头里filters过滤的条件都要被清除。

上述是 bug 解决后所要达到的期望，实际上 bug 的产生是因为点击“清除”按钮后，搜索栏的搜索条件被清空了，但是 Table 组件表头column里的过滤条件未清空

用一个 gif 图来描述该 bug 的诞生：

上述动图最后点击“清除”按钮后，虽然数据表格里的数据刷新了，但是表头-状态的 filters 并未还原。

解决方法：

其实对于 react + antd 很熟练的开发者和善于利用组件的接口文档学习的开发者来说，这个问题很容易就解决了，因为在 antd 工具的官方文档中就有该问题的解决办法，只不过 antd 文档未给出具体的实例说明，这就需要开发者线下自学了。

解决问题的主要办法是 column API 的 filteredValue （ https://2x.ant.design/components/table-cn/ ，antd2.0和3.0均可查阅）这个属性，官方文档的介绍是这样的：

使用实例（方法）： 以下代码只列出解决问题的必要部分

组件内部变量存储

state = {
  filteredInfo: null   // table表头里的筛选集合
表格组件状态变化后的处理方法 
 
 // 表格组件状态变化后的处理 
 tableChange = ({ current: pageNum, pageSize }, filters) => {
    this.setState({ filteredInfo: filters })
    // 获取表头的筛选状态值
    const status = filters.status 
    // 请求数据
    this.props.getList({
      pageNum,
      pageSize,
      status
一键清除（包含Form和Table）方法
 
  resetForm = (e) => {
    e.preventDefault();
    this.props.form.resetFields();
    // 清除时，同时也要清除表头里的筛选
    this.setState({ filteredInfo: null });
    // 因为全部清除，故无需传参数
    this.props.getList();
react 里的 render() 方法
 
let { filteredInfo } = this.state;
filteredInfo = filteredInfo || {};
const columns = [
    title: '状态', 
    dataIndex: 'status',
    filters:  [
      { text: '生成中', value: '0' },
      { text: '待确认', value: '1' },
      { text: '已确认', value: '2' },
      ......
    filteredValue: filteredInfo.status || null
    render: (text) => [
      '生成中', '待确认', '已确认', ......
    ][text]
    title: '入账标志', 
    dataIndex: 'enterStatus',
    filters: [
      { text: '未入账', value: '0' },
      { text: '入账中', value: '1' },
      { text: '已入账', value: '2' }
    filteredValue: filteredInfo.enterStatus || null,
    render: (text) => [
      '未入账', '入账中', '已入账'
    ][text]
return (
    <Form onSubmit={this.handleSubmit}>
      <Form.Item>
        <Button onClick={this.resetForm}> 清除 </Button>
        <Button type='primary' htmlType='submit'>搜索</Button>
      </Form.Item>
    </Form>
    <Table
      onChange={this.tableChange}
      columns={columns}
      dataSource={this.props.list}
      pagination={
        current: this.props.pageNum,
        pageSize: this.props.pageSize,
        total: this.props.total,
        showSizeChanger: true,
        showQuickJumper: true
实质上，就是把 filteredValue 的值从有变为无的过程，这样就解决了这个bug...
                    2019.12.06 遇到了一个bugbug 描述：在使用 antd 组合组件 Form + Table 时，选择相应的搜索条件后，点击“搜索”按钮，Table 会渲染相应的数据，且Table 表头也有自带的过滤功能（实际上是column的filters属性起的作用）；然后再点击“清除”按钮，所有的搜索条件和表头里filters过滤的条件都要被清除。上述是 bug 解决后所要达到的期望，实...
				
Form +Table 实现了自定义筛选菜单的功能。具体可以参考https://ant.design/components/table-cn/#components-table-demo-custom-filter-panel。
但是此功能会有bug：
选择相应的搜索条件后，点击“搜索”按钮，Table 会渲染相应的数据，且Table 表头也有自带的过滤功能（实际上是column的filters属性起的作用）；然后再点击“清除”按钮，所有的搜索条件和表头里filters过滤的条件都要被清除。但是 Ta.
				
此仓库已废弃
重要： 此仓库后续不再维护，也不再接受更多的特性更新。ant-design/pro-table 将会迁移至 ant-design/pro-components 仓库进行后续的维护，访问  了解更多。此变更不影响继续使用 @ant-design/pro-table 这个 npm 包名安装使用此组件。
@ant-design/pro-table
:trophy: Use Ant Design Table like a Pro!
pro-table 在 antd 的 table 上进行了一层封装，支持了一些预设，并且封装了一些行为。这里只列出与 antd table 不同的 api。
Table
request
一个获得 dataSource 的方法
(params?: {pageSize: number;current: number;[key: s
如上图，在点击操作按钮之后，会重新请求列表数据，列表数据更新。这个时候如果我先筛选了Age列， 再点击操作按钮更新数据会发现，列表上渲染的数据是经过筛选之后的，筛选项并没有被清空，依旧那么亮眼。
为了更好的描述，我把操作按钮换成了Tab页，可以先来对比一下两个页面：
        dataIndex: 'name',
        key: 'name',
        filters: [{ text: 'Joe', value: 'Joe' }, { text: 'Jim', value: 'Jim' }],
        filteredValue: filteredInfo.name || null,
        onFilter: (value, record) => record....
				
Table 手动输入实现多条件筛选官网例子改HOOK版样例官方版本HOOK版本条件筛选关键语句更改为多条件筛选
要是不想看改HOOK的部分，可以先看官方的例子，然后跳到条件筛选关键语句
官网例子改HOOK版样例
首先给出官网找到的例子作为参考
import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Table,
				
业务背景：
今天拿到了一个表格数据展示的需求，由于业务需要对数据进行选择过滤并且原来已经选用了 antd 中的 Table，所以选择了使用antd Table 自带的过滤功能。
关于过滤方式
首先在表格中进行数据的过滤和筛选大概有两种方式:
第一种是在后端进行数据的筛选，即做查询关键字的处理，当数据量较大，服务器压力较小的情况下进行选用。
第二种是在前端进行数据的筛选，即在前端对数据进行处理后显示，对客户端页面渲染压力较小的情况下进行选用，它还有一点优势就是减少了对后端的http请求，可以降低对后