本文介绍了一种在菜单列表中加入搜索功能的方法，以解决菜单过多带来的查找不便问题。通过将MenuList设置为计算属性并根据搜索框的值进行过滤，实现了菜单的高效搜索。文章还分享了在实现过程中需要注意的细节，如保持已展示菜单的高亮状态、使用updateActiveName方法更新活动菜单名称及处理Menu的accordion属性。
一、场景
最近在做的某系统，菜单非常多，系统本身业务比较多，再加上十好几张报表，导致整个菜单列表非常长，用户在找的时候非常的不方便，于是便想着给菜单列表加上搜索功能，先瞧一下效果，从左到右分别是：未搜索，搜索，折叠
二、实现思路
MenuList设置成计算属性，根据搜索框的值过滤菜单列表，实现思路是比较简单的，但是有一些细节的地方需要注意：
（1）在每一次渲染新菜单列表的时候，已经在展示的界面要设置成高亮；
（2）如果只是更改了active-name绑定的属性值，页面上并不会显示出来，这时需要用到Menu的 updateActiveName 方法；
（3）在设置展开菜单时，需要考虑Menu的accordion属性；
三、实现思路
这个组件我已经上传到npm：ivew-side-menu-search-chg
希望可以帮到有相同需求的小伙伴们~~
关于属性文档我会慢慢补充在npm上，欢迎围观~~
扫一扫
917
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
