抽出来一个组件？凑出来一个！

我们在做项目的时候经常会用组件库来满足我们平时常用的一些组件来提高我们的开发效率，但是很多时候产品提的需求并不能很好的适配到我们的组件，如果组件的可自定意高，那么还可以很好的解决，但是很多时候都不是那么符合拓展要求。

这周我就用了东拼西凑的方法，完成了一个需求,效果大概如下：

需求

有人就要说了，这个不是antd现成就有的吗？且慢听说细细道来：在实现这个级联要求的时候我们的组件可以进行模糊搜索，但是不是antd这种前端模糊搜索，而是后端模糊搜索，同时由于数据量很大，所以在级联二级搜索的时候还要进行分页操作。总结一下就是实现一个级联可分页支持服务端搜索的组件。

思考

看到这里如果你熟悉antd我不知道你会不会有什么想法，我脑子里出现了以下几种思路：

思路一

既然要模糊搜索我直接一次把分页的页面量拉满，这样不就可以全部数据请求到前端了，再用组件搜索。很明显这个不是一个好办法，把需求的难点直接变没。。。

思路二

对于分页搜索我们可以采取虚拟滚动的解决方法，通过实现获取滚动触底事件来实现数据的加载，实现分页搜索，而对于服务端搜索我们可以在filter函数那里发起请求由于antd其实是获取每一个options来进行判断通过返回true/false来决定列表的展示所以要进行防抖处理避免疯狂请求），然后更新我们的响应式options这样在搜索列表展示的时候就会是服务端搜索出来的新数据了。

这个实现方式有以下问题：首先实现一个虚拟滚动没那么简单，同时效果不会那么好，比如一些加载动画不好处理。其次对于响应式options的处理，在我们搜索完后，假设我们还需要重新分页请求数据，这个时候数据是之前搜索的数值，这样展示起来分页首次数据是错误的。

思路三

这次我采用拼凑的方式实现这个需求，既然要分页，那么我就用antd自带的分页栏：

这样我就解决了分页难处理的痛点。然后对于服务端的搜索功能我直接不复用你的搜索框，而是重新使用一个搜索框这样就不用走你前端分页的逻辑了。剩下的问题就是这个分页器和搜索框应该放在哪里呢？当然还是放在我们的级联选择中，这里就用到了他的拓展菜单功能：

对于下面的分页器我们需要在一级选择其改变的时候进行更改，所以我们需要维护当前激活的一级选择器的状态，对于模糊搜索，我们也是根据对应的一级选择器激活的项来进行对应的查询，由于是偏向业务的东西代码就不进行展示了，相信看到例图，大家也会有所思路了。