DIY一个集搜索、排序、分页功能的列表组件

源码地址: github.com/wetrial/wet…
效果

背景

在中控台系统中经常需要带条件过滤、分页、排序等的列表页面，antd提供了表格、排序、分页等，多个页面中使用会发现里面其实有很多重复的代码，自己捣腾下最后有了这个组件，

使用说明

列表使用

如图所示:

1. 引入高阶组件pagedQuery
2. 引入封装的TableList 基本上跟Antd table组件用法一致，只是初始化了许多默认参数
3. 用高阶组件包裹组件，并传参

// type为必须参数，一般对应dva中model的effects
{
  type: string; // 类型 一般指获取数据源的action
  page?: number; // 当前页 从1开始
  defaultPageSize?:number; // 每页默认显示的条数
  pageSize?: number; // 每页显示数量
  record?: boolean; // 是否记录搜索状态
}
复制代码

4. 请求附带的基础参数，通过_getQueryParams返回一个对象，用于一些特殊场景，一般为空_
5. 处理搜索按钮的点击事件，将搜索表单中的值收集并传递给onSearchData方法
6. 处理重置按钮，将重置按钮的点击事件绑定来源于高阶组件给组件的onResetData
7. 获取数据源并给到table

详情页面

回退到列表页面有两种形式，
1.通过浏览器上的回退按钮
2.详情页面放置一个回退按钮，代码层面实现路由跳转到列表页
一般情况都使用第二种方式，因为如果编辑页面比较负责，可能里面有子页面，子页面又可以进入这一通过浏览器上的回退按钮需要点击N多次，再者，浏览器的回退有数量限制
同样，如图所示：

1. 引入方法backRouter
2. 在需要跳转路由的地方调用一下backRoute方法，并将路由传递给方法，该方法会返回之前记录的列表路由

思路

实现思路，通过高阶组件实现，代码  、  api文档  
记录搜索状态，通过sessionStorage来实现，考虑到sessionStore的一个优势，关闭当前tab页就失效了 省去还得去手动清除记录状态的麻烦(比如放到localStorage)，再者 这种查询状态不需要持久记录  
回退方法backRouter，由于高阶组件中会在组件的componentWillUnmount方法中记录搜索状态，以location的pathname为key，以location的search为值存放，所以通过backRouter方法匹配的时候会从sessionStorage中查询，如果有则带上查询串，以此来达到记录页面状态的效果

更多请参观：www.yuque.com/wetrial/fro…