需求

實現(xiàn)側(cè)邊導航欄的同時，需要實現(xiàn)篩選功能。且由于導航名稱中可能包含大寫英文字母，所以還需要支持小寫英文字母篩選。

篩選效果：

清除篩選條件：

思路

• 監(jiān)聽el-input的回車事件：@keydown.enter.native
• 將父組件傳過來的導航欄數(shù)據(jù)進行深拷貝一層，并新建一個數(shù)組newMenuList進行存儲匹配的導航欄數(shù)據(jù)：const copySideMenuList = JSON.parse(JSON.stringify(this.sideMenuList));
  • 深拷貝一層，為了防止原數(shù)據(jù)在搜索一次后被篡改，因為引用的是同一個內(nèi)存地址
• 將el-input中輸入的字符串中的小寫字母轉(zhuǎn)為大寫字母：event = event.toUpperCase();
• 使用includes方法判斷導航欄的名字中是否有el-input中的數(shù)據(jù)，如果有則將這一項整個push到newMenuList中，最后判斷newMenuList的length是否大于0，如果大于0則將newMenuList賦值給導航欄組件需要的數(shù)據(jù)中，如果newMenuList的length不大于0則進行提示：未匹配到該菜單
• 當el-input執(zhí)行clearable操作或者el-input中輸入為空時，將父組件傳過來的導航欄數(shù)據(jù)賦值到導航欄組件所需要的數(shù)據(jù)中

實現(xiàn)

• 這里使用到el-input的clearable，@clear，@keydown.enter.native
• 注意：因為是el-input標簽的本質(zhì)其實是elementUI的一個組件，所以監(jiān)聽回車鍵需要添加事件修飾符.native，它允許我們在自定義的組件標簽中添加原生的DOM事件
  • 其他的elementUI組件也是可以用這個方法來綁定原生DOM事件
  • 而el-button之所以可以直接使用@click是因為elementUI在創(chuàng)建組件時就為<el-button>里面的<button>標簽綁定了一個click事件，相當于是官方提前為我們準備好了一個click接口，我們看似是在調(diào)用原生js的click事件，實際上是在調(diào)用elementUI官方為我們提前準備好的方法。

主要代碼如下：

<el-input placeholder="輸入關(guān)鍵字進行過濾" v-model="filterText" class="side-menu__filter" size="small" clearable suffix-icon="el-icon-search" @clear="handleSearch(filterText)" @keydown.enter.native="handleSearch(filterText)"></el-input>

handleSearch(event) {
      // 將將輸入的字符串中的小寫字母轉(zhuǎn)為大寫字母
      event = event.toUpperCase();
      let newMenuList = [];
      // 將父組件傳過來的導航欄數(shù)據(jù)進行深拷貝一層
      const copySideMenuList = JSON.parse(JSON.stringify(this.sideMenuList));
      copySideMenuList.forEach((firstItem) => {
        // 循環(huán)判斷導航欄數(shù)據(jù)是否匹配到搜索的字符
        if (firstItem.label.includes(event)) {
          newMenuList.push(firstItem);
        }
        if (!firstItem.label.includes(event) && firstItem.children) {
          for (let secondItem of firstItem.children) {
            if (secondItem.label.includes(event)) {
              newMenuList.push(secondItem);
            }
          }
        }
      });
      if (newMenuList.length > 0) {
        this.menuList = newMenuList;
      } else {
        this.$message.warning('未匹配到該菜單');
      }
      // 搜索字符串為空時返回原數(shù)據(jù)
      if (event == '') {
        this.menuList = this.sideMenuList;
      }
    }

到此這篇關(guān)于VUE側(cè)邊導航欄實現(xiàn)篩選過濾的示例代碼的文章就介紹到這了,更多相關(guān)VUE側(cè)邊導航欄篩選過濾內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論