1. 程式人生 > >【iview】如何設計一個可以搜尋的選單列表

【iview】如何設計一個可以搜尋的選單列表

一、場景

        最近在做的某系統,選單非常多,系統本身業務比較多,再加上十好幾張報表,導致整個選單列表非常長,使用者在找的時候非常的不方便,於是便想著給選單列表加上搜索功能,先瞧一下效果,從左到右分別是:未搜尋,搜尋,摺疊

                        

二、實現思路

MenuList設定成計算屬性,根據搜尋框的值過濾選單列表,實現思路是比較簡單的,但是有一些細節的地方需要注意:

(1)在每一次渲染新選單列表的時候,已經在展示的介面要設定成高亮;

(2)如果只是更改了active-name繫結的屬性值,頁面上並不會顯示出來,這時需要用到Menu的 updateActiveName 方法;

(3)在設定展開選單時,需要考慮Menu的accordion屬性;

三、實現思路

希望可以幫到有相同需求的小夥伴們~~

關於屬性文件我會慢慢補充在npm上,歡迎圍觀~~