VUE侧边导航栏实现筛选过滤的示例代码
作者：晚风予星
本文主要介绍了VUE侧边导航栏实现筛选过滤的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
需求
实现侧边导航栏的同时，需要实现筛选功能。且由于导航名称中可能包含大写英文字母，所以还需要支持小写英文字母筛选。
筛选效果：
清除筛选条件：
思路
- 监听
el-input的回车事件：@keydown.enter.native - 将父组件传过来的导航栏数据进行深拷贝一层，并新建一个数组
newMenuList进行存储匹配的导航栏数据：const copySideMenuList = JSON.parse(JSON.stringify(this.sideMenuList));- 深拷贝一层，为了防止原数据在搜索一次后被篡改，因为引用的是同一个内存地址
- 将
el-input中输入的字符串中的小写字母转为大写字母：event = event.toUpperCase(); - 使用
includes方法判断导航栏的名字中是否有el-input中的数据，如果有则将这一项整个push到newMenuList中，最后判断newMenuList的length是否大于0，如果大于0则将newMenuList赋值给导航栏组件需要的数据中，如果newMenuList的length不大于0则进行提示：未匹配到该菜单 - 当
el-input执行clearable操作或者el-input中输入为空时，将父组件传过来的导航栏数据赋值到导航栏组件所需要的数据中
实现
- 这里使用到
el-input的clearable，@clear，@keydown.enter.native - 注意：因为是
el-input标签的本质其实是elementUI的一个组件，所以监听回车键需要添加事件修饰符.native，它允许我们在自定义的组件标签中添加原生的DOM事件- 其他的
elementUI组件也是可以用这个方法来绑定原生DOM事件 - 而
el-button之所以可以直接使用@click是因为elementUI在创建组件时就为<el-button>里面的<button>标签绑定了一个click事件，相当于是官方提前为我们准备好了一个click接口，我们看似是在调用原生js的click事件，实际上是在调用elementUI官方为我们提前准备好的方法。
- 其他的
主要代码如下：
<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;
}
}到此这篇关于VUE侧边导航栏实现筛选过滤的示例代码的文章就介绍到这了,更多相关VUE侧边导航栏筛选过滤内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！