自定义下拉选择器,实现搜索和分页
由于在项目中的表单很多都用到选择器,基于UI框架的搜索功能已经有了,但是老大跟我说要分页,好吧,于是我用了表格,因为表格自带分页嘛,后面我又觉得表格太丑了,而且复用性不高,于是开始琢磨自己搞一个!
来吧!展示!
实现思路
上草图
总体分为两部分,上边主要是选择后回显的,下边为展开部分,主要包括搜索输入框、结果列表以及分页。
首先,该实现基于ant design框架,选用 Dropdown 下拉菜单满足需求,所以所有东西都是在 v-dropdown 里面进行的
回显区需要考虑:
- 回显内容 showField,对应的值 valueField;
- 提示内容 placeholder
- 向上向下图标显示
- 清除按钮
选择区需要考虑:
- 触发显示,聚焦搜索输入框
- 列表展示数据来源
- 当前已选项样式高亮
- 实现分页功能
- 确定选项后父组件的更新
样式也挺麻烦的,当时有做参考
细节的东西在具体敲代码的时候还需要考虑更多,这里就不展开记录啦
实现过程
以上的已经把结构捋清楚了,下面我记一下当时处理比较难搞的点
首先说明:列表数据源 list 是在父组件传入的
列表渲染
回显处理
分页处理
包括首页,尾页,下一页,上一页
当时麻烦的点在于,需要注意初始化列表分页,输入关键字搜索后的结果分页,清空搜索框后的数据。。。。这几个不同情况下的数据处理
/* template部分 */
<div style="text-align: center;" v-show="list.length > 5">
<div class="sp-pagination">
<div class="sp-page-info">{
{ pageInfo }}</div>
<ul ref="page">
<li :class="{ 'sp-disabled': pageNumber === 1 }">
<a href