前言
今天接到的需求,增加一个下拉筛选条件,但是后端数据是一次性返回的,足足有几千条,故考虑做分页,但是view-design貌似不天然支持,故......
安装
npm install patch-package--save-dev
添加npm钩子
修改源码
根据dist指向的文件,找到源码,为iview.js文件
找到iSelect组件
1-添加usePaging属性,标识启用分页
2-为select添加类名,方便dom查找
3-监听滑动事件,到底对外发出通知
业务二次封装
根据usePaging对数据做截取,并记录currentPage
当监听到下拉后,修改page即可
筛选
为了保证和原来一样,需要在打开下拉时恢复
创建补丁
npx patch-package view-design
这将在项目中生成patchs文件
内容即变动代码
2022-7-29缺陷修复
复现
在中文输入法下进行搜索P,搜不到结果,但是如果直接英文下搜P,是正常的
解决
view-design里是获取的slots,并基于此对查询字符串做筛选的,但是打印发现获取的slots是错的
找到vue的set派发更新处,打上断点,发现会触发两次,其中的visible一次为true一次为false
这意味着,中英切换状态下,view-design会先关闭下拉弹窗,然后再重新打开,这就命中了我打开恢复数据的逻辑
故,找到view-design,将该默认行为禁用掉即可
网友评论