react+ antd 表格筛选

表格的筛选事件是在table的onchange中发生的，其选中值在onchange的参数2中，参数1是分页器

//  应先定义pagination,这一步是为了第一次请求数据时配置pagination相关
 const [pagination, setPagination] = useState({
    showQuickJumper: true,
    showSizeChanger: true,
    pageSize: 10,
    current: 1, //当前页码 
    total: 0, // 总条数
    showTotal: (totals, range) => `共${totals}条`,
  })

// 通常，onchange事件总是与初次请求函数一起使用，此时，如何做到兼容性就是一个及大的问题
// 初加载时请求表格数据  
useEffect(() => {
//pagination作为实参，标识上方定义的usestate
    getPageTableResource(pagination)
  }, [])

//思路：filter1,filter2初始化时就需要传入，因而需要赋值为空，而后来的"...filters"则是筛选态下同名的筛选参数，作为最后加入的filters，会将上述的选 filter1，filter2覆盖掉，而在第一次加载时，由于是undefined，所以不会对 filter1，filter2造成影响，或者也可以将形参filters赋为空对象
 const getPageTableResource = (pagination, filters) => {
    const { current: page, pageSize: limit } = pagination
    axios.post({
      //other augs
       page, limit,
        filter1:[],
        filter2:[],
       ...filters
    }).then(res=>{

    // 赋值
  })
}

dom :

          <Table columns={assignSpecinfoTableHeader}
            rowKey={(_, index) => index}
            pagination={pagination}
            onChange={(pagination, filters) => {
              // 分页动作 或者筛选时，触发该函数 
              getPageTableResource(pagination, filters)
            }}
          />

总结：初加载时要将筛选值赋值为空，请求函数需要带上pagination，change时要带参数2并且在最后展开，这一步是为了将同名参数覆盖掉(也就是赋空值的那些筛选key)

无法表达太清晰，看代码吧

以上。