VUE侧边导航栏实现筛选过滤的示例代码

<el-input placeholder="输入关键字进行过滤" 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) {
      // 将将输入的字符串中的小写字母转为大写字母
      event = event.toUpperCase();
      let newMenuList = [];
      // 将父组件传过来的导航栏数据进行深拷贝一层
      const copySideMenuList = JSON.parse(JSON.stringify(this.sideMenuList));
      copySideMenuList.forEach((firstItem) => {
        // 循环判断导航栏数据是否匹配到搜索的字符
        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('未匹配到该菜单');
      }
      // 搜索字符串为空时返回原数据
      if (event == '') {
        this.menuList = this.sideMenuList;
      }
    }